vue使用腾讯地图，实现点标记，搜索

效果图：

1、public文件夹下index.html添加

// public/index.html
<script src="https://map.qq.com/api/js?v=2.exp&key=你的ksy"></script>
<script src="https://map.qq.com/api/gljs?v=1.exp&libraries=service&key=你的key"></script>
1
2
3

2、父组件

<template>
  <el-button type="success" size="small" @click="seeMap">打开地图</el-button>
  <TMmap ref="map" v-if="mapShow" :position="list" @PositionDegrees="degrees"></TMmap>
</template>

import TMmap from "@/components/TMmap/index.vue"
export default {
  components: { TMmap },
  data() {
	return {
	  list: {},
	  mapShow: false
	}
  },
  methods: {
	seeMap() {
	  this.list.lng = 116.404
      this.list.lat = 39.915
      this.mapShow = true
      // 加载完成调用
      this.$nextTick(()=>{
        this.$refs.map.MapResetting()
      })
	},
	// 地图搜索
    MapSearch() {
      this.$refs.map.MapSearch('故宫')
    },
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

2、地图组件

<template>
  <div>
    <!-- 定义地图显示容器 -->
    <div id="container"></div>
  </div>
</template>

<script>
  export default {
    name: 'TMmap',
    props: ['position'],
    data() {
      return {
        map: '',
        markerLayer: ''
      }
    },
    mounted() {
      this.initMap()
    },
    methods: {
      // 初始化
      initMap() {
        const _this = this;
        const center = new TMap.LatLng(this.position.lat, this.position.lng)
        const map = new TMap.Map(document.getElementById('container'), {
          center: center, //设置地图中心点坐标
          zoom: 17.2, //设置地图缩放级别
          pitch: 43.5, //设置俯仰角
          rotation: 45 //设置地图旋转角度
        });
        this.map = map

        //创建并初始化MultiMarker
        let markerLayer = new TMap.MultiMarker({
          map: map, //指定地图容器
          //样式定义
          styles: {
            //创建一个styleId为"myStyle"的样式（styles的子属性名即为styleId）
            "myStyle": new TMap.MarkerStyle({
              "width": 25, // 点标记样式宽度（像素）
              "height": 35, // 点标记样式高度（像素）
              //焦点在图片中的像素位置，一般大头针类似形式的图片以针尖位置做为焦点，圆形点以圆心位置为焦点
              "anchor": {x: 16, y: 32}
            })
          },
          //点标记数据数组
          geometries: [{
            "id": "1", //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
            "styleId": 'myStyle', //指定样式id
            "position": new TMap.LatLng(this.position.lat, this.position.lng), //点标记坐标位置
            "properties": { //自定义属性
              "title": "marker1"
            }
          }]
        });
        this.markerLayer = markerLayer
        
        //绑定点击事件
        map.on("click",function(evt){
          let lat = evt.latLng.getLat().toFixed(6);
          let lng = evt.latLng.getLng().toFixed(6);
          
          //修改点标记的位置
          markerLayer.updateGeometries([
            {
             "styleId":"myStyle",
             "id": "1",
             "position": new TMap.LatLng(lat, lng),
            }
          ])
          
          // 回显经纬度
          _this.$emit('PositionDegrees', {lng, lat})
        })
      },
      
      // 修改初始化中心点
      MapResetting() {
        const center = new TMap.LatLng(this.position.lat, this.position.lng)
        this.map.setCenter(center) // 修改地图中心点坐标
        this.map.setZoom(17.2) // 设置地图缩放级别
        
        //修改点标记的位置
       this.markerLayer.updateGeometries([
          {
           "styleId":"myStyle",
           "id": "1",
           "position": new TMap.LatLng(this.position.lat, this.position.lng),
          }
        ])
      },
      
      // 初始化搜索
      MapSearch(val) {
        let markers = new TMap.MultiMarker({
          map: this.map,
          geometries: [],
        });
        let infoWindowList = Array(10);
        let suggest = new TMap.service.Suggestion({
          pageSize: 10, // 返回结果每页条目数
        });
        
        suggest.getSuggestions({ keyword: val, location: this.map.getCenter() }).then((res) => {
          if (res.data != []) {
            res.data.forEach((item,index) => {
              // let geometries = markers.getGeometries();
              let geometries = [];
              let infoWindow = new TMap.InfoWindow({
                map: this.map,
                position: item.location,
                content: `
${item.title}
地址：${item.address}`,
                offset: { x: 0, y: -50 },
              }); // 新增信息窗体显示地标的名称与地址、电话等信息
              infoWindow.close();
              infoWindowList[index] = infoWindow;
              geometries.push({
                id: String(index), // 点标注数据数组
                position: item.location,
              });
              markers.updateGeometries(geometries); // 绘制地点标注
              markers.on('click', (e) => {
                infoWindowList[Number(e.geometry.id)].open();
              }); // 点击标注显示信息窗体
            })
            
            this.map.setCenter(res.data[0].location) // 修改地图中心点坐标
          }
        });
      }
    }
  }
</script>

<style>
  #container {
    width: 100%;
    height: 100%;
  }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141