vue 高德地图搜索功能_vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)...

1.首先在index.html引入高德地图的秘钥。如图：

注意：如果使用关键字搜索功能要加上plugin=AMap.Autocomplete,AMap.PlaceSearch，否则功能无法使用，并会报错

2. 定位功能，代码如下：

const map = new AMap.Map(this.$refs.container, {

resizeEnable: true

}) // 创建Map实例

const options = {

'showButton': true, // 是否显示定位按钮

'buttonPosition': 'LB', // 定位按钮的位置

'buttonOffset': new AMap.Pixel(10, 20), // 定位按钮距离对应角落的距离

'showMarker': true, // 是否显示定位点

'showCircle': true, // 是否显示定位精度圈

'circleOptions': {// 定位精度圈的样式

'strokeColor': '#0093FF',

'noSelect': true,

'strokeOpacity': 0.5,

'strokeWeight': 1,

'fillColor': '#02B0FF',

'fillOpacity': 0.25

},

zoomToAccuracy: true // 定位成功后是否自动调整地图视野到定位点

}

AMap.plugin(['AMap.Geolocation'], function() {

const geolocation = new AMap.Geolocation(options)

map.addControl(geolocation)

geolocation.getCurrentPosition()

})

//下面是点击地图时加入mark。注意：要在绑定事件前记录this，否则在绑定的回调方法中使用this将是该事件的this

const _this = this

AMap.event.addListener(map, 'click', function(e) {

map.clearMap() // 清除地图上所有添加的覆盖物

new AMap.Marker({

position: e.lnglat,

map: map

})

_this.handleMap(e.lnglat.getLng(), e.lnglat.getLat())

})

3.关键字搜索功能

html部分代码(注意ref,id,class的名字要和官网保持一致，否则可能出不来想要的效果)：

请输入关键字：</