高德地圖api版本：JavaScript API V2.0.0
用高德地圖實(shí)現(xiàn)輸入搜索地址 添加標(biāo)記，鼠標(biāo)移動(dòng)標(biāo)記來(lái)獲取當(dāng)前該點(diǎn)的經(jīng)緯度，詳細(xì)地址
1. 高德地圖的頁(yè)面構(gòu)建：首先先引入高德地圖，增加自己想要的功能，我們這里需要一個(gè)輸入聯(lián)想框
2. 高德地圖的Api來(lái)實(shí)現(xiàn)相關(guān)功能
1. 構(gòu)建地圖
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()) // 在圖面添加比例尺控件，展示地圖在當(dāng)前層級(jí)和緯度下的比例尺
that.map.addControl(new AMap.ToolBar()) //在圖面添加鷹眼控件，在地圖右下角顯示地圖的縮略圖
that.geocoder = new AMap.Geocoder({ radius: 1000, extensions: 'all', city: '全國(guó)' })
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('根據(jù)經(jīng)緯度查詢(xún)地址失敗')
}
})
})
})
},2. 根據(jù)輸入框內(nèi)容搜索地點(diǎn)，經(jīng)緯度
searchKeyWord() {
let that = this
that.placeSearchComponent.search(that.address, function (status, result) {
if (status === 'complete' && result.info === 'OK') {
that.show = true
// 關(guān)鍵字聯(lián)想的選項(xiàng)內(nèi)容
that.poiList = result.poiList.pois
} else {
that.showsearchResult = false
that.poiList = []
that.$message({
message: '沒(méi)有查到結(jié)果',
type: 'warning'
})
}
})
},3. 動(dòng)態(tài)設(shè)置點(diǎn)標(biāo)記，構(gòu)造矢量圓形
dynamicSign(lng, lat, radius) {
var marker = new AMap.Marker({
position: new AMap.LngLat(lng, lat), //參數(shù)為經(jīng)緯度
draggable: true,
cursor: 'move',
riseOnHover: true,
bubble: true,
cursor: 'pointer'
})
// 構(gòu)造矢量圓形
const circle = new AMap.Circle({
center: new AMap.LngLat(lng, lat), // 圓心位置
radius: radius, //半徑
strokeColor: '#1890ff', //線顏色
strokeOpacity: 1, //線透明度
strokeWeight: 1, //線粗細(xì)度
fillColor: '#1890ff', //填充顏色
fillOpacity: 0.35 //填充透明度
})
this.map.clearMap()
this.map.add([marker, circle]) // 添加點(diǎn)標(biāo)志
marker.on('dragend', this.markerClick)
},高德地圖api接口比較豐富，大多的需求都能實(shí)現(xiàn)。本次主要使用了POI搜索插件AMap.PlaceSearch，獲取城市信息AMap.getCityInfo，設(shè)置標(biāo)記點(diǎn)AMap.Marker，構(gòu)造矢量圖AMap.Circle結(jié)合了帶列表的POI搜索的這個(gè),再將監(jiān)聽(tīng)事件改為列表點(diǎn)選的selectChange事件，獲得當(dāng)前點(diǎn)選地點(diǎn)經(jīng)緯度，這樣將二者進(jìn)行了組合一下實(shí)現(xiàn)了以上的搜索以及展現(xiàn)方式。
