|
|
@@ -8,6 +8,13 @@
|
|
|
<template #header
|
|
|
><h4 class="full-width text-left">地理位置</h4></template
|
|
|
>
|
|
|
+ <input
|
|
|
+ v-model="keyword"
|
|
|
+ id="input"
|
|
|
+ placeholder="搜索位置"
|
|
|
+ style="z-index: 9999"
|
|
|
+ @keyup.enter="searchKeyword"
|
|
|
+ />
|
|
|
<div class="flex flex-center flex-justify-start flex-col">
|
|
|
<div id="container" class="map"></div>
|
|
|
<el-divider />
|
|
|
@@ -79,7 +86,11 @@ export default {
|
|
|
data() {
|
|
|
return {
|
|
|
show: false,
|
|
|
- aMap: null
|
|
|
+ aMap: null,
|
|
|
+ keyword: '',
|
|
|
+ auto: null,
|
|
|
+ lnglat: [], // 经纬度数组 [lng,lat]
|
|
|
+ placeSearch: null
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
@@ -87,10 +98,9 @@ export default {
|
|
|
AMapLoader.load({
|
|
|
key: '6577c6fd4841e6c69d5fb1bd15bd4696', // 申请好的Web端开发者Key,首次调用 load 时必填
|
|
|
version: '2.0', // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
|
|
|
- plugins: ['AMap.Scale', 'AMap.Marker'] // 需要使用的的插件列表,如比例尺'AMap.Scale'等
|
|
|
+ plugins: ['AMap.Scale', 'AMap.PlaceSearch', 'AMap.AutoComplete'] // 需要使用的的插件列表,如比例尺'AMap.Scale'等
|
|
|
})
|
|
|
.then(AMap => {
|
|
|
- this.aMap = AMap
|
|
|
this.map = new AMap.Map('container', {
|
|
|
// 设置地图容器id
|
|
|
viewMode: '2D', // 是否为3D地图模式
|
|
|
@@ -98,25 +108,55 @@ export default {
|
|
|
mapStyle: 'amap://styles/whitesmoke',
|
|
|
center: [this.latitude, this.longitude] // 初始化地图中心点位置
|
|
|
})
|
|
|
- this.addMarker()
|
|
|
+ this.addMarker(this.latitude, this.longitude)
|
|
|
this.addEvent()
|
|
|
+ this.mapSearchInit()
|
|
|
})
|
|
|
.catch(e => {
|
|
|
console.log(e)
|
|
|
})
|
|
|
},
|
|
|
- addMarker() {
|
|
|
- console.log('addMark')
|
|
|
- const marker = new this.aMap.Marker({
|
|
|
- position: new this.aMap.LngLat(this.latitude, this.longitude), // 经纬度对象,也可以是经纬度构成的一维数组[116.39, 39.9]
|
|
|
- title: '大理'
|
|
|
+ addMarker(lng, lat) {
|
|
|
+ console.log('位置', lng, lat) // lnglat=[经度,纬度]
|
|
|
+ const marker = new AMap.Marker({
|
|
|
+ position: [lng, lat]
|
|
|
})
|
|
|
- this.map.add(marker)
|
|
|
+ marker.setMap(this.map)
|
|
|
},
|
|
|
addEvent() {
|
|
|
this.map.on('click', event => {
|
|
|
console.log(event)
|
|
|
})
|
|
|
+ },
|
|
|
+ /** 初始化搜索工具 */
|
|
|
+ mapSearchInit() {
|
|
|
+ // 绑定自动提示
|
|
|
+ const autoOptions = {
|
|
|
+ input: 'input'
|
|
|
+ }
|
|
|
+ this.auto = new AMap.Autocomplete(autoOptions)
|
|
|
+ // 注册placeSearch组件
|
|
|
+ this.placeSearch = new AMap.PlaceSearch({
|
|
|
+ city: '大理'
|
|
|
+ })
|
|
|
+ console.log(this.auto, this.placeSearch)
|
|
|
+ },
|
|
|
+ /** 关键词搜索 */
|
|
|
+ searchKeyword() {
|
|
|
+ console.log(this.keyword)
|
|
|
+ this.placeSearch.search(this.keyword, function (status, result) {
|
|
|
+ // 查询成功时,result即对应匹配的POI信息
|
|
|
+ console.log(status)
|
|
|
+ console.log(result)
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ // 当选中某条搜索记录时触发
|
|
|
+ selectSite(e) {
|
|
|
+ console.log(e)
|
|
|
+ this.lnglat = [e.poi.location.lng, e.poi.location.lat]
|
|
|
+ this.placeSearch.setCity(e.poi.adcode)
|
|
|
+ this.placeSearch.search(e.poi.name)
|
|
|
}
|
|
|
}
|
|
|
}
|