高德地圖api版本：JavaScript API V2.0.0
用高德地圖實現輸入搜索地址 添加標記，鼠標移動標記來獲取當前該點的經緯度，詳細地址
1. 高德地圖的頁面構建：首先先引入高德地圖，增加自己想要的功能，我們這里需要一個輸入聯想框
2. 高德地圖的Api來實現相關功能
1. 構建地圖
initMap() {
const that = this
return new Promise((reslove, reject) => {
AMapLoader.load({
key: 'cf5c437b14780406af75a81b380cafac',
version: '2.0',
plugins: [
'AMap.ToolBar',
'AMap.Scale',
'AMap.Geocoder',
'AMap.Geolocation',
'AMap.PlaceSearch',
'AMap.AutoComplete',
'AMap.CitySearch'
],
resizeEnable: true
}).then((AMap) => {
that.map = new AMap.Map('allmap', {
resizeEnable: true,
zoom: 14,
viewMode: '3D', //使用3D視圖
center: [that.positionInfo.lng, that.positionInfo.lat]
})
that.getCurrentLocation()
that.map.addControl(new AMap.Scale()) // 在圖面添加比例尺控件，展示地圖在當前層級和緯度下的比例尺
that.map.addControl(new AMap.ToolBar()) //在圖面添加鷹眼控件，在地圖右下角顯示地圖的縮略圖
that.geocoder = new AMap.Geocoder({ radius: 1000, extensions: 'all', city: '全國' })
that.mapSearchInit()
that.geocoder.getAddress([that.positionInfo.lng, that.positionInfo.lat], function (status, result) {
if (status === 'complete' && result.regeocode) {
that.address = result.regeocode.formattedAddress
} else {
that.$message.error('根據經緯度查詢地址失敗')
}
})
})
})
},2. 根據輸入框內容搜索地點，經緯度
searchKeyWord() {
let that = this
that.placeSearchComponent.search(that.address, function (status, result) {
if (status === 'complete' && result.info === 'OK') {
that.show = true
// 關鍵字聯想的選項內容
that.poiList = result.poiList.pois
} else {
that.showsearchResult = false
that.poiList = []
that.$message({
message: '沒有查到結果',
type: 'warning'
})
}
})
},3. 動態設置點標記，構造矢量圓形
dynamicSign(lng, lat, radius) {
var marker = new AMap.Marker({
position: new AMap.LngLat(lng, lat), //參數為經緯度
draggable: true,
cursor: 'move',
riseOnHover: true,
bubble: true,
cursor: 'pointer'
})
// 構造矢量圓形
const circle = new AMap.Circle({
center: new AMap.LngLat(lng, lat), // 圓心位置
radius: radius, //半徑
strokeColor: '#1890ff', //線顏色
strokeOpacity: 1, //線透明度
strokeWeight: 1, //線粗細度
fillColor: '#1890ff', //填充顏色
fillOpacity: 0.35 //填充透明度
})
this.map.clearMap()
this.map.add([marker, circle]) // 添加點標志
marker.on('dragend', this.markerClick)
},高德地圖api接口比較豐富，大多的需求都能實現。本次主要使用了POI搜索插件AMap.PlaceSearch，獲取城市信息AMap.getCityInfo，設置標記點AMap.Marker，構造矢量圖AMap.Circle結合了帶列表的POI搜索的這個,再將監聽事件改為列表點選的selectChange事件，獲得當前點選地點經緯度，這樣將二者進行了組合一下實現了以上的搜索以及展現方式。
