腾讯地图覆盖物添加点击事件及说明信息------vue

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)
    }
  }
}