vue 腾讯地图展示用户定位附近的门店

前言

本需求主要是获取用户当前定位，并将定位返回的经纬度坐标请求到后端接口，后端返回距离用户最近的门店，并且前端把门店标记在地图上。

关于坐标系

我们通常用经纬度来表示一个地理位置，但是由于一些原因，我们从不同渠道得到的经纬度信息可能并不是在同一个坐标系下。

高德地图、腾讯地图以及谷歌中国区地图使用的是GCJ-02坐标系
百度地图使用的是BD-09坐标系
底层接口(HTML5 Geolocation或ios、安卓API)通过GPS设备获取的坐标使用的是WGS-84坐标系

地图选择

由于后端数据库保存的门店经纬度数据是爬取高德地图获得的，然而前端高德地图是需要收费才可使用，如果选择百度地图，就会出现坐标系不一致的问题，从而导致搜索附近门店结果不正确，需要对坐标进行转换，权衡之后最终选择了腾讯地图。

效果演示

一、引入js

目前腾讯官方并没有在npm上发布腾讯地图插件，所以咱还是参考官网用js引入的方法
index.html

二、创建一个地图容器

<template><div id="container"></div>
</template>

三、vue默认数据

data(){return {center:[lat: "23.168403",lng: "113.458454"], // 地图中心tMap:null, // 地图实例zoom:12, // 设置地图缩放级别markerArr: [], // 标记列表marker: "", // 覆盖物实例list:[] // 请求后端获取到的数据}
}

三、初始化地图容器

mounted() {this.tMap = new TMap.Map("container", {center: new TMap.LatLng(this.center.lat, this.center.lng), //设置地图中心点坐标zoom: this.zoom, //设置地图缩放级别viewMode: "2D",});
}

四、获取用户定位

created() {this.getLocation();
}

methods:{// 获取用户定位getLocation() {var geolocation = new qq.maps.Geolocation("你的key","myMap" // 你的应用名称);geolocation.getLocation(this.showPositionFun, this.errorPositionFun);},// 用户授权定位showPositionFun(position) {if (position) {this.center.lng = position.lng;this.center.lat = position.lat;this.tMap.setCenter(new TMap.LatLng(this.center.lat, this.center.lng)); // 重新更新地图中心this.showPosition = true;} else {this.showPosition = false;}this.getList(this.center); // 如有定位信息，传给后端接口获取附近的门店},// 定位失败errorPositionFun() {this.showPosition = false;this.getList(); // 如没有定位信息，请求后端接口获取默认数据},
}

五、地图添加点标记

// 请求接口获取到的数据list
this.list.forEach(item=> {// 获取一个随机不重复的字符串做为idlet id = new Date().getTime() + parseInt(Math.random() * 10000);this.markerArr.push({id: id,longitude: item.longitude,latitude: item.latitude,styleId: "marker",properties: {title: "marker",},});
})

// 只要点标记markerArr发生变化，就重新渲染点覆盖物
watch: {markerArr: {handler(newValue) {let tmp = [];for (let m = 0; m < newValue.length; m++) {let item = newValue[m];item.position = new TMap.LatLng(item.latitude, item.longitude);tmp.push(item);}this.marker = new TMap.MultiMarker({map: this.tMap,styles: {// 点标记样式marker: new TMap.MarkerStyle({width: 20, // 样式宽height: 30, // 样式高anchor: { x: 10, y: 30 }, // 描点位置}),},geometries: tmp,});},deep: true,},
},

六、查询条件发生变化，渲染下一群覆盖物之前，先清除现有的点覆盖物

onChange() {this.marker.setGeometries([]);
}

七、点击列表选择某个定位，跳转到详情页并导航
为列表每一项绑定click事件，并传入当前的item

goMap(item) {window.location.href = `https://apis.map.qq.com/uri/v1/marker?marker=coord:${item.latitude},${item.longitude};title:${item.name};addr:${item.address}&referer=${TMAP_KEY}`;
},

更多跳转参数请参考腾讯地图文档
https://lbs.qq.com/webApi/uriV1/uriGuide/uriWebMarker