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>

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.404this.list.lat = 39.915this.mapShow = true// 加载完成调用this.$nextTick(()=>{this.$refs.map.MapResetting()})},// 地图搜索MapSearch() {this.$refs.map.MapSearch('故宫')},}
}

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//创建并初始化MultiMarkerlet 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: `<h3>${item.title}</h3><p>地址：${item.address}</p>`,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>