注意：！！！在做uniapp小程序导航功能时，拿到我们在后台管理设置的经纬度，根据经纬度去导航到店的时候，最好用腾讯地图来获取经纬度，uniapp小程序那边默认导航经纬度是腾讯系的，如果在后台管理这边是用百度地图获取的经纬度，在uniapp中导航的时候需要转换经纬度不然位置会有偏差！！
需求: 点击地图-标记点位置-获取到经纬度和具体的地址信息，根据输入框地址获取经纬度-标记点位置
创建腾讯账号：https://lbs.qq.com/dev/console/application/mine
创建一个应用，拿到key
我们调用那个接口，就去申请相应接口的额度，不申请的话默认只能调一次
我们是跨域掉的接口，我这边用的jsonp直接调的，不想用jsonp的可以自己写一下解决跨域的方法jsonp（只支持 GET 请求）：
npm install jsonp/ws/geocoder/v1/?location接口传参方式：
https://apis.map.qq.com/ws/geocoder/v1/?location=30.180210,120.230350&key=你的key&output=jsonp&callback=__jp0接口返回参数：
点击地图获取地址经纬度代码：
调用API逆地址解析：/ws/geocoder/v1?location=*
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&libraries=service&key=你的key"></script>
<div style="height: 380px; margin-top: 10px"><div id="map" style="height: 100%; width: 80%"></div>
</div>
import jsonp from "jsonp";markerLayer: null,
map: null,
storeLat:30.179976,
storeLng:120.229676,
dataStoreAddress:''created() { this.initMap(this.storeLat, this.storeLng); },//初始化地图initMap(lat, lng) {let that = this;lat = lat || 30.179976; // 默认纬度lng = lng || 120.229676; // 默认经度const center = new TMap.LatLng(lat, lng);if (!that.map) {that.map = new TMap.Map(document.getElementById("map"), {center: center,zoom: 17,});that.map.on("click", this.clickHandler);that.markerLayer = new TMap.MultiMarker({id: "marker-layer",map: that.map,styles: {marker: new TMap.MarkerStyle({width: 25,height: 35,anchor: { x: 16, y: 32 },src: "https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/marker-pink.png",}),},geometries: [{id: "demo",styleId: "marker",position: new TMap.LatLng(lat, lng),properties: {title: "marker",},},],});} else {// 如果地图已经存在，只更新中心位置和标记that.map.setCenter(new TMap.LatLng(lat, lng));that.markerLayer.updateGeometries([{styleId: "marker",id: "demo",position: new TMap.LatLng(lat, lng),},]);}
},//地址逆解析获取详细地址
getAreaCode() {return new Promise((resolve, reject) => {const url = `https://apis.map.qq.com/ws/geocoder/v1/?location=${this.storeLat},${this.storeLng}&key=你的key&output=jsonp`;jsonp(url, (error, res) => {if (error) {reject(error);} else {resolve(res);}});}).then((res) => {console.log(res, "点击地图获取到的地址信息");this.dataStoreAddress = res.result.address;}).catch((error) => {console.error("Error:", error);});
},
// 地图点击事件
clickHandler(evt) {let lat = evt.latLng.getLat().toFixed(6);let lng = evt.latLng.getLng().toFixed(6);this.storeLng = lng;this.storeLat = lat;this.getAreaCode();this.markerLayer.updateGeometries([{styleId: "marker",id: "demo",position: new TMap.LatLng(lat, lng),},]);
},根据输入框地址获取经纬度：
调用API地址解析：/ws/geocoder/v1?address=*
接口分配额度
接口参数：
接口返回：
代码：
<el-input v-model="dataStoreAddress" ></el-input>
<el-button type="primary" @click="setLaLo()">根据地址获取经纬度</el-button> setLaLo() {this.markerLayer.setGeometries([]);//清空点标记let geocoder = new TMap.service.Geocoder();geocoder.getLocation({ address: `${ this.dataStoreAddress }` }).then((res) => {let { lat, lng } = res.result.location;this.markerLayer.updateGeometries([{styleId: "marker",id: "demo",position: res.result.location,},]);this.storeLng = lng;this.storeLat = lat;this.map.setCenter(res.result.location);});},uniapp小程序百度系经纬度转换为腾讯经纬度方法：
//导航---转换经纬度
export function openLoWgs84Bd09(latitude, longitude) {const x_pi = 3.14159265358979324 * 3000.0 / 180.0;const x = longitude - 0.0065;const y = latitude - 0.006;const z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi);const wz = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi);const bd_lon = z * Math.cos(wz);const bd_lat = z * Math.sin(wz);return {lat: bd_lat,lon: bd_lon};
}地址距离计算需求---将 wx.getLocation 获取的 WGS84 坐标转化为百度地图的 BD-09 坐标
export function wgs84ToBd09(lat, lon) {const x = lon;const y = lat;const z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * Math.PI);const theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * Math.PI);const bd_lon = z * Math.cos(theta) + 0.0065;const bd_lat = z * Math.sin(theta) + 0.006;return {lat: bd_lat,lon: bd_lon};
}
