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