腾讯地图覆盖物添加点击事件及说明信息------vue
程序员文章站
2022-07-02 09:24:57
...
export default {
props: {
words: {
type: String,
default: ''
}
},
data() {
return {
searchService: [],
map: [],
markers: [],
region: '武汉',
keyword: ''
}
},
mounted() {
this.init()
this.keyword = this.words
this.searchKeyword()
},
methods: {
// 初始化
init() {
var self = this
var center = new qq.maps.LatLng(30.600685, 114.318924)
this.map = new qq.maps.Map(this.$refs.map, {
center: center,
zoom: 13
})
var infoWin = new qq.maps.InfoWindow({
map: this.map
})
var latlngBounds = new qq.maps.LatLngBounds()
// 调用Poi检索类
this.searchService = new qq.maps.SearchService({
complete: function(results) {
var pois = results.detail.pois
for (let i = 0, l = pois.length; i < l; i++) {
var poi = pois[i]
latlngBounds.extend(poi.latLng)
var marker = new qq.maps.Marker({
map: self.map,
position: poi.latLng
})
// 覆盖物添加点击事件
qq.maps.event.addListener(marker, 'click', function(event) {
self.$emit('getLatLng', event.latLng)
})
// ============================
// 设置覆盖物鼠标移上去时所展示的信息
marker.setTitle(poi.name)
self.markers.push(marker)
}
self.map.fitBounds(latlngBounds)
}
})
},
// 清除地图上的marker
clearOverlays(overlays) {
var overlay
while ((overlay = overlays.pop())) {
overlay.setMap(null)
}
},
// 关键字查询
searchKeyword() {
this.clearOverlays(this.markers)
this.searchService.setLocation(this.region)
this.searchService.search(this.keyword)
}
}
}
</script>
上一篇: 百度地图清除指定覆盖物
下一篇: 获取视频的第一帧