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的名字要和官网保持一致，否则可能出不来想要的效果)：

请输入关键字：

script代码：

export default {

name: 'Map',

props: [],

data() {

return {

placeSearch: null

}

},

mounted() {

this.mapInit()

},

methods: {

mapInit() {

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 // 定位成功后是否自动调整地图视野到定位点

}

//注意：要在绑定事件前记录this，否则在绑定的回调方法中使用this将是该事件的this

const _this = this

// 输入提示

const autoOptions = {

input: 'tipinput'

}

const auto = new AMap.Autocomplete(autoOptions)

this.placeSearch = new AMap.PlaceSearch({

map: map

}) // 构造地点查询类

AMap.event.addListener(auto, 'select', this.select)// 注册监听，当选中某条记录时会触发

//点击搜索出的mark点事件

AMap.event.addListener(this.placeSearch, 'markerClick', function(e) {

_this.$emit('bMapDate', e.data.location.lng, e.data.location.lat)

})

},

select(e) {

this.placeSearch.setCity(e.poi.adcode)

this.placeSearch.search(e.poi.name) // 关键字查询查询

},

handleMap(o, a) {

this.$emit('bMapDate', o, a)

}

}

}