7 changed files with 820 additions and 90 deletions
@ -0,0 +1,342 @@ |
|||
<template> |
|||
<div> |
|||
|
|||
<div class="tab-header webtop"> |
|||
<!-- 标题 --> |
|||
<div>仓库信息</div> |
|||
<!-- start 添加修改按钮 --> |
|||
<div> |
|||
<el-button type="primary" size="small" @click="saveAddress">保存</el-button> |
|||
<el-button type="info" size="small" @click="handleReturn()">关闭</el-button> |
|||
</div> |
|||
<!-- end 添加修改按钮 --> |
|||
<!-- end 详情按钮 --> |
|||
</div> |
|||
|
|||
<div class="listconadd"> |
|||
<div class="flex-center" style="padding: 5px;"> |
|||
<div id="mymap" style="height:650px;width:90%;margin-left: 5%;margin-top: 2%;"></div> |
|||
<div class="g-poi-search" style="display: flex;flex-direction: column;"> |
|||
<span style="">请输入关键字：</span> |
|||
<el-input id="tipinput" v-model="searchText" style="width:300px;margin-top: 5px;" /> |
|||
<span style="margin-top: 15px;width:300px;">当前地址:{{addressInfo.address}}</span> |
|||
</div> |
|||
|
|||
|
|||
|
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
</template> |
|||
|
|||
<script> |
|||
import AMapLoader from "@amap/amap-jsapi-loader"; |
|||
|
|||
export default { |
|||
name: "Home", |
|||
components: {}, |
|||
data() { |
|||
return { |
|||
searchText: '', |
|||
map: null, |
|||
geocoder: null, |
|||
addressInfo: { |
|||
lngAndLat: "", |
|||
address: "" |
|||
}, |
|||
pointList: [], |
|||
geolocation: null, |
|||
}; |
|||
}, |
|||
mounted() { |
|||
|
|||
}, |
|||
methods: { |
|||
showAdd() { |
|||
this.initMap(); |
|||
}, |
|||
initMap() { |
|||
let that = this; |
|||
window._AMapSecurityConfig = { |
|||
securityJsCode: "e4ce71df213230e89231cc3ef9c98313", |
|||
}; |
|||
AMapLoader.load({ |
|||
key: "0054c9409ec7a97ddfe933224b36f45c", // 申请好的Web端开发者Key，首次调用 load 时必填 |
|||
version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15 |
|||
plugins: [], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...'] |
|||
}) |
|||
.then((AMap) => { |
|||
|
|||
that.map = new AMap.Map("mymap", { |
|||
// 设置地图容器id |
|||
viewMode: "3D", // 是否为3D地图模式 |
|||
zoom: 15, // 初始化地图级别 |
|||
center: [116.397428, 39.90923], // 初始化地图中心点位置 |
|||
}); |
|||
|
|||
that.map.plugin("AMap.Geocoder", function() { |
|||
that.geocoder = new AMap.Geocoder(); |
|||
|
|||
|
|||
// geocoder.getLocation(address, function (status, result) { |
|||
// if (status === "complete" && result.info === "OK") { |
|||
// // result中对应详细地理坐标信息 |
|||
// console.log(result); |
|||
// } |
|||
// }); |
|||
}); |
|||
|
|||
that.map.plugin('AMap.Geolocation', function() { |
|||
var geolocation = new AMap.Geolocation({ |
|||
enableHighAccuracy: true, //是否使用高精度定位，默认:true |
|||
timeout: 10000, //超过10秒后停止定位，默认：5s |
|||
position: 'RB', //定位按钮的停靠位置 |
|||
offset: [10, 20], //定位按钮与设置的停靠位置的偏移量，默认：[10, 20] |
|||
zoomToAccuracy: true, //定位成功后是否自动调整地图视野到定位点 |
|||
|
|||
}); |
|||
that.geolocation = geolocation |
|||
that.map.addControl(geolocation); |
|||
geolocation.getCurrentPosition(function(status, result) { |
|||
if (status == 'complete') { |
|||
that.onComplete(result) |
|||
} else { |
|||
that.onError(result) |
|||
} |
|||
}); |
|||
|
|||
}); |
|||
|
|||
//输入提示 |
|||
var autoOptions = { |
|||
input: "tipinput" |
|||
}; |
|||
|
|||
that.map.plugin(['AMap.PlaceSearch', 'AMap.AutoComplete'], function() { |
|||
var auto = new AMap.AutoComplete(autoOptions); |
|||
var placeSearch = new AMap.PlaceSearch({ |
|||
map: that.map |
|||
}); //构造地点查询类 |
|||
auto.on("select", select); //注册监听，当选中某条记录时会触发 |
|||
function select(e) { |
|||
placeSearch.setCity(e.poi.adcode); |
|||
placeSearch.search(e.poi.name); |
|||
placeSearch.search(e.poi.name, function(status, result) { |
|||
console.log("placeSearch", result) |
|||
that.map.clearMap() |
|||
var pois = result.poiList.pois; |
|||
for (var i = 0; i < pois.length; i++) { |
|||
var poi = pois[i]; |
|||
var marker = []; |
|||
marker[i] = new AMap.Marker({ |
|||
position: poi.location, // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9] |
|||
title: poi.name |
|||
}); |
|||
// 将创建的点标记添加到已有的地图实例： |
|||
//创建点标记的点击事件 |
|||
marker[i].on("click", function(e) { |
|||
console.log("click", e); |
|||
that.showInfoWindow2(e) |
|||
}); |
|||
that.map.add(marker[i]); |
|||
} |
|||
that.map.setFitView(); |
|||
}); //关键字查询查询 |
|||
|
|||
} |
|||
}); |
|||
|
|||
this.handleClick() |
|||
|
|||
}) |
|||
.catch((e) => { |
|||
console.log(e); |
|||
}); |
|||
}, |
|||
|
|||
//解析定位结果 |
|||
onComplete(data) { |
|||
console.log('定位结果：' + data.position) //经纬度信息 |
|||
let lnglat = data.position; |
|||
let marker = new AMap.Marker({ //创建标记 |
|||
title: "", |
|||
position: new AMap.LngLat(lnglat.lng, lnglat.lat) |
|||
}) |
|||
this.map.clearMap() // 清除所有覆盖物（点标志） |
|||
this.map.add(marker) // 添加点标志 |
|||
this.showInfoWindow(marker); //自定义信息窗体 |
|||
}, |
|||
//解析定位错误信息 |
|||
onError(data) { |
|||
console.log('onError：' + data) //经纬度信息 |
|||
this.getLngLatLocation() |
|||
}, |
|||
//在获取具体定位失败时调用的代码：（非精准定位！！！） |
|||
getLngLatLocation() { |
|||
const that = this; |
|||
that.geolocation.getCityInfo(function(status, result) { |
|||
if (status === 'complete') { |
|||
let data = result.position |
|||
that.address = result.province + result.city; |
|||
that.showLocation(data) |
|||
} else { |
|||
that.$message.error('获取地址失败') |
|||
} |
|||
}) |
|||
}, |
|||
//新增标记 |
|||
showLocation(data) { |
|||
let marker = new AMap.Marker({ |
|||
title: "", |
|||
position: new AMap.LngLat(data[0], data[1]) //参数为经纬度 |
|||
}) |
|||
this.map.clearMap() // 清除所有覆盖物（点标志） |
|||
this.map.add(marker) // 添加点标志 |
|||
this.showInfoWindow(marker); //自定义信息窗体 |
|||
}, |
|||
//自定义信息窗体 |
|||
showInfoWindow2(marker) { |
|||
console.log('showInfoWindow：', marker) |
|||
let that = this |
|||
let lnglat = [marker.lnglat.lng, marker.lnglat.lat] |
|||
let address = '' |
|||
that.geocoder.getAddress(lnglat, function(status, result) { |
|||
if (status === 'complete' && result.regeocode) { |
|||
address = result.regeocode.formattedAddress; |
|||
that.addressInfo.address = result.regeocode.formattedAddress; |
|||
that.addressInfo.lngAndLat = marker.lnglat.lng + ',' + marker.lnglat.lat |
|||
let infoWindow = new AMap.InfoWindow({ |
|||
isCustom: true, //是否自定义信息窗体 |
|||
content: `<div style="background-color: white;padding: 5px; border-radius: 5px;border: 1px solid #cccccc;"> 地址：${address}</div>`, |
|||
// content: marker.content, |
|||
closeWhenClickMap: true, |
|||
zIndex: 999, |
|||
offset: new AMap.Pixel(15, -20) |
|||
}); |
|||
infoWindow.open(that.map, lnglat); |
|||
|
|||
} else { |
|||
// console.log('getAddress：', '根据经纬度查询地址失败') |
|||
// that.$message.error('根据经纬度查询地址失败') |
|||
} |
|||
}) |
|||
|
|||
}, |
|||
//自定义信息窗体 |
|||
showInfoWindow(marker) { |
|||
console.log('showInfoWindow：', marker) |
|||
let that = this |
|||
let lnglat = [marker._position.lng, marker._position.lat] |
|||
let address = '' |
|||
that.geocoder.getAddress(lnglat, function(status, result) { |
|||
if (status === 'complete' && result.regeocode) { |
|||
address = result.regeocode.formattedAddress; |
|||
that.addressInfo.address = result.regeocode.formattedAddress; |
|||
that.addressInfo.lngAndLat = marker._position.lng + ',' + marker._position.lat |
|||
let infoWindow = new AMap.InfoWindow({ |
|||
isCustom: true, //是否自定义信息窗体 |
|||
content: `<div style="background-color: white;padding: 5px; border-radius: 5px;border: 1px solid #cccccc;"> 地址：${address}</div>`, |
|||
// content: marker.content, |
|||
closeWhenClickMap: true, |
|||
zIndex: 999, |
|||
offset: new AMap.Pixel(16, -35) |
|||
}); |
|||
infoWindow.open(that.map, marker.getPosition()); |
|||
|
|||
} else { |
|||
// console.log('getAddress：', '根据经纬度查询地址失败') |
|||
// that.$message.error('根据经纬度查询地址失败') |
|||
} |
|||
}) |
|||
|
|||
}, |
|||
//点击地图获取地理位置 |
|||
handleClick() { |
|||
this.map.on('click', (e) => { |
|||
let lng = e.lnglat.lng |
|||
let lat = e.lnglat.lat |
|||
console.log('handleClick：', e) |
|||
let marker = new AMap.Marker({ |
|||
position: new AMap.LngLat(lng, lat), |
|||
}) |
|||
this.map.clearMap() // 清除所有覆盖物（点标志） |
|||
this.map.add(marker) // 添加点标志 |
|||
let lnglat = [lng, lat] |
|||
let that = this |
|||
that.geocoder.getAddress(lnglat, function(status, result) { |
|||
if (status === 'complete' && result.regeocode) { |
|||
console.log('getAddress：', result.regeocode) |
|||
that.addressInfo.address = result.regeocode.formattedAddress; |
|||
that.addressInfo.lngAndLat = lng + ',' + lat |
|||
that.showInfoWindow(marker); //自定义信息窗体 |
|||
// let thisPosition = { |
|||
// address: that.address, |
|||
// lng: lng, |
|||
// lat: lat |
|||
// }; |
|||
// that.$emit("select", thisPosition) //返回给父组件 |
|||
|
|||
} else { |
|||
console.log('getAddress：', '根据经纬度查询地址失败') |
|||
that.$message.error('根据经纬度查询地址失败') |
|||
} |
|||
}) |
|||
}) |
|||
}, |
|||
|
|||
// 添加修改返回 |
|||
saveAddress() { |
|||
this.$emit('backData', this.addressInfo) |
|||
this.searchText = '' |
|||
this.map = null |
|||
this.geocoder = null |
|||
this.addressInfo = { |
|||
lngAndLat: "", |
|||
address: "" |
|||
} |
|||
this.pointList = [] |
|||
this.geolocation = null |
|||
}, |
|||
// 返回 |
|||
handleReturn() { |
|||
this.searchText = '' |
|||
this.map = null |
|||
this.geocoder = null |
|||
this.addressInfo = { |
|||
lngAndLat: "", |
|||
address: "" |
|||
} |
|||
this.pointList = [] |
|||
this.geolocation = null |
|||
this.$emit('doback') |
|||
} |
|||
|
|||
|
|||
} |
|||
}; |
|||
</script> |
|||
<style scoped> |
|||
.g-poi-search { |
|||
position: absolute; |
|||
top: 100px; |
|||
left: 130px; |
|||
padding: 8px; |
|||
border-radius: 2px; |
|||
background-color: #fff; |
|||
border: 1px #c1c1c1 solid; |
|||
} |
|||
|
|||
.g-poi-search .el-select .el-input>input.el-input__inner { |
|||
height: 28px; |
|||
line-height: 28px; |
|||
} |
|||
|
|||
.g-poi-search-popper .el-select-dropdown__item { |
|||
width: 200px; |
|||
height: 28px; |
|||
line-height: 28px; |
|||
|
|||
} |
|||
</style> |
|||
@ -0,0 +1,292 @@ |
|||
<template> |
|||
|
|||
<div class="flex-center" style="padding: 5px;"> |
|||
<div id="mymap" style="height:650px;width:90%;margin-left: 5%;margin-top: 2%;"></div> |
|||
<div class="g-poi-search"> |
|||
<!-- <span style="">请输入关键字：</span> --> |
|||
<el-input id="tipinput" v-model="searchText" style="width:300px;margin-top: 5px;" /> |
|||
<!-- <span style="margin-top: 15px;width:300px;">当前地址:{{addressInfo.address}}</span> --> |
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
|
|||
</template> |
|||
|
|||
<script> |
|||
import AMapLoader from "@amap/amap-jsapi-loader"; |
|||
|
|||
export default { |
|||
name: "Home", |
|||
components: {}, |
|||
data() { |
|||
return { |
|||
searchText: '', |
|||
map: null, |
|||
geocoder: null, |
|||
addressInfo: { |
|||
lngAndLat: "", |
|||
address: "" |
|||
}, |
|||
pointList: [], |
|||
geolocation: null, |
|||
}; |
|||
}, |
|||
mounted() { |
|||
|
|||
}, |
|||
methods: { |
|||
showAdd() { |
|||
this.initMap(); |
|||
}, |
|||
initMap() { |
|||
let that = this; |
|||
window._AMapSecurityConfig = { |
|||
securityJsCode: "e4ce71df213230e89231cc3ef9c98313", |
|||
}; |
|||
AMapLoader.load({ |
|||
key: "0054c9409ec7a97ddfe933224b36f45c", // 申请好的Web端开发者Key，首次调用 load 时必填 |
|||
version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15 |
|||
plugins: [], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...'] |
|||
}) |
|||
.then((AMap) => { |
|||
|
|||
that.map = new AMap.Map("mymap", { |
|||
// 设置地图容器id |
|||
viewMode: "3D", // 是否为3D地图模式 |
|||
zoom: 15, // 初始化地图级别 |
|||
center: [116.397428, 39.90923], // 初始化地图中心点位置 |
|||
}); |
|||
|
|||
//输入提示 |
|||
var autoOptions = { |
|||
input: "tipinput" |
|||
}; |
|||
|
|||
that.map.plugin(['AMap.PlaceSearch', 'AMap.AutoComplete'], function() { |
|||
var auto = new AMap.AutoComplete(autoOptions); |
|||
var placeSearch = new AMap.PlaceSearch({ |
|||
map: that.map |
|||
}); //构造地点查询类 |
|||
auto.on("select", select); //注册监听，当选中某条记录时会触发 |
|||
function select(e) { |
|||
console.log("placeSearch", e) |
|||
placeSearch.setCity(e.poi.adcode); |
|||
placeSearch.search(e.poi.name); |
|||
// placeSearch.search(e.poi.name, function(status, result) { |
|||
// console.log("placeSearch", result) |
|||
// that.map.clearMap() |
|||
// var pois = result.poiList.pois; |
|||
// for (var i = 0; i < pois.length; i++) { |
|||
// var poi = pois[i]; |
|||
// var marker = []; |
|||
// marker[i] = new AMap.Marker({ |
|||
// position: poi.location, // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9] |
|||
// title: poi.name |
|||
// }); |
|||
// // 将创建的点标记添加到已有的地图实例： |
|||
// //创建点标记的点击事件 |
|||
// marker[i].on("click", function(e) { |
|||
// console.log("click", e); |
|||
// that.showInfoWindow2(e) |
|||
// }); |
|||
// that.map.add(marker[i]); |
|||
// } |
|||
// that.map.setFitView(); |
|||
// }); //关键字查询查询 |
|||
|
|||
} |
|||
}); |
|||
|
|||
// this.handleClick() |
|||
|
|||
}) |
|||
.catch((e) => { |
|||
console.log(e); |
|||
}); |
|||
}, |
|||
|
|||
//解析定位结果 |
|||
onComplete(data) { |
|||
console.log('定位结果：' + data.position) //经纬度信息 |
|||
let lnglat = data.position; |
|||
let marker = new AMap.Marker({ //创建标记 |
|||
title: "", |
|||
position: new AMap.LngLat(lnglat.lng, lnglat.lat) |
|||
}) |
|||
this.map.clearMap() // 清除所有覆盖物（点标志） |
|||
this.map.add(marker) // 添加点标志 |
|||
this.showInfoWindow(marker); //自定义信息窗体 |
|||
}, |
|||
//解析定位错误信息 |
|||
onError(data) { |
|||
console.log('onError：' + data) //经纬度信息 |
|||
this.getLngLatLocation() |
|||
}, |
|||
//在获取具体定位失败时调用的代码：（非精准定位！！！） |
|||
getLngLatLocation() { |
|||
const that = this; |
|||
that.geolocation.getCityInfo(function(status, result) { |
|||
if (status === 'complete') { |
|||
let data = result.position |
|||
that.address = result.province + result.city; |
|||
that.showLocation(data) |
|||
} else { |
|||
that.$message.error('获取地址失败') |
|||
} |
|||
}) |
|||
}, |
|||
//新增标记 |
|||
showLocation(data) { |
|||
let marker = new AMap.Marker({ |
|||
title: "", |
|||
position: new AMap.LngLat(data[0], data[1]) //参数为经纬度 |
|||
}) |
|||
this.map.clearMap() // 清除所有覆盖物（点标志） |
|||
this.map.add(marker) // 添加点标志 |
|||
this.showInfoWindow(marker); //自定义信息窗体 |
|||
}, |
|||
//自定义信息窗体 |
|||
showInfoWindow2(marker) { |
|||
console.log('showInfoWindow：', marker) |
|||
let that = this |
|||
let lnglat = [marker.lnglat.lng, marker.lnglat.lat] |
|||
let address = '' |
|||
that.geocoder.getAddress(lnglat, function(status, result) { |
|||
if (status === 'complete' && result.regeocode) { |
|||
address = result.regeocode.formattedAddress; |
|||
that.addressInfo.address = result.regeocode.formattedAddress; |
|||
that.addressInfo.lngAndLat = marker.lnglat.lng + ',' + marker.lnglat.lat |
|||
let infoWindow = new AMap.InfoWindow({ |
|||
isCustom: true, //是否自定义信息窗体 |
|||
content: `<div style="background-color: white;padding: 5px; border-radius: 5px;border: 1px solid #cccccc;"> 地址：${address}</div>`, |
|||
// content: marker.content, |
|||
closeWhenClickMap: true, |
|||
zIndex: 999, |
|||
offset: new AMap.Pixel(15, -20) |
|||
}); |
|||
infoWindow.open(that.map, lnglat); |
|||
|
|||
} else { |
|||
// console.log('getAddress：', '根据经纬度查询地址失败') |
|||
// that.$message.error('根据经纬度查询地址失败') |
|||
} |
|||
}) |
|||
|
|||
}, |
|||
//自定义信息窗体 |
|||
showInfoWindow(marker) { |
|||
console.log('showInfoWindow：', marker) |
|||
let that = this |
|||
let lnglat = [marker._position.lng, marker._position.lat] |
|||
let address = '' |
|||
that.geocoder.getAddress(lnglat, function(status, result) { |
|||
if (status === 'complete' && result.regeocode) { |
|||
address = result.regeocode.formattedAddress; |
|||
that.addressInfo.address = result.regeocode.formattedAddress; |
|||
that.addressInfo.lngAndLat = marker._position.lng + ',' + marker._position.lat |
|||
let infoWindow = new AMap.InfoWindow({ |
|||
isCustom: true, //是否自定义信息窗体 |
|||
content: `<div style="background-color: white;padding: 5px; border-radius: 5px;border: 1px solid #cccccc;"> 地址：${address}</div>`, |
|||
// content: marker.content, |
|||
closeWhenClickMap: true, |
|||
zIndex: 999, |
|||
offset: new AMap.Pixel(16, -35) |
|||
}); |
|||
infoWindow.open(that.map, marker.getPosition()); |
|||
|
|||
} else { |
|||
// console.log('getAddress：', '根据经纬度查询地址失败') |
|||
// that.$message.error('根据经纬度查询地址失败') |
|||
} |
|||
}) |
|||
|
|||
}, |
|||
//点击地图获取地理位置 |
|||
handleClick() { |
|||
this.map.on('click', (e) => { |
|||
let lng = e.lnglat.lng |
|||
let lat = e.lnglat.lat |
|||
console.log('handleClick：', e) |
|||
let marker = new AMap.Marker({ |
|||
position: new AMap.LngLat(lng, lat), |
|||
}) |
|||
this.map.clearMap() // 清除所有覆盖物（点标志） |
|||
this.map.add(marker) // 添加点标志 |
|||
let lnglat = [lng, lat] |
|||
let that = this |
|||
that.geocoder.getAddress(lnglat, function(status, result) { |
|||
if (status === 'complete' && result.regeocode) { |
|||
console.log('getAddress：', result.regeocode) |
|||
that.addressInfo.address = result.regeocode.formattedAddress; |
|||
that.addressInfo.lngAndLat = lng + ',' + lat |
|||
that.showInfoWindow(marker); //自定义信息窗体 |
|||
// let thisPosition = { |
|||
// address: that.address, |
|||
// lng: lng, |
|||
// lat: lat |
|||
// }; |
|||
// that.$emit("select", thisPosition) //返回给父组件 |
|||
|
|||
} else { |
|||
console.log('getAddress：', '根据经纬度查询地址失败') |
|||
that.$message.error('根据经纬度查询地址失败') |
|||
} |
|||
}) |
|||
}) |
|||
}, |
|||
|
|||
// 添加修改返回 |
|||
saveAddress() { |
|||
this.$emit('backData', this.addressInfo) |
|||
// this.searchText = '' |
|||
// this.map = null |
|||
// this.geocoder = null |
|||
// this.addressInfo = { |
|||
// lngAndLat: "", |
|||
// address: "" |
|||
// } |
|||
// this.pointList = [] |
|||
// this.geolocation = null |
|||
}, |
|||
// 返回 |
|||
handleReturn() { |
|||
// this.searchText = '' |
|||
// this.map = null |
|||
// this.geocoder = null |
|||
// this.addressInfo = { |
|||
// lngAndLat: "", |
|||
// address: "" |
|||
// } |
|||
// this.pointList = [] |
|||
// this.geolocation = null |
|||
this.$emit('doback') |
|||
} |
|||
|
|||
|
|||
} |
|||
}; |
|||
</script> |
|||
<style scoped> |
|||
.g-poi-search { |
|||
position: absolute; |
|||
top: 100px; |
|||
left: 130px; |
|||
padding: 8px; |
|||
border-radius: 2px; |
|||
background-color: #fff; |
|||
border: 1px #c1c1c1 solid; |
|||
} |
|||
|
|||
.g-poi-search .el-select .el-input>input.el-input__inner { |
|||
height: 28px; |
|||
line-height: 28px; |
|||
} |
|||
|
|||
.g-poi-search-popper .el-select-dropdown__item { |
|||
width: 200px; |
|||
height: 28px; |
|||
line-height: 28px; |
|||
|
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue