vue2腾讯地图点击地图获取地址经纬度web

注意：！！！在做uniapp小程序导航功能时，拿到我们在后台管理设置的经纬度，根据经纬度去导航到店的时候，最好用腾讯地图来获取经纬度，uniapp小程序那边默认导航经纬度是腾讯系的，如果在后台管理这边是用百度地图获取的经纬度，在uniapp中导航的时候需要转换经纬度不然位置会有偏差！！

需求: 点击地图-标记点位置-获取到经纬度和具体的地址信息，根据输入框地址获取经纬度-标记点位置

创建腾讯账号：https://lbs.qq.com/dev/console/application/mine

创建一个应用，拿到key

我们调用那个接口，就去申请相应接口的额度，不申请的话默认只能调一次

我们是跨域掉的接口，我这边用的jsonp直接调的，不想用jsonp的可以自己写一下解决跨域的方法jsonp（只支持 GET 请求）：

javascript 复制代码

npm install jsonp

/ws/geocoder/v1/?location接口传参方式：

javascript 复制代码

https://apis.map.qq.com/ws/geocoder/v1/?location=30.180210,120.230350&key=你的key&output=jsonp&callback=__jp0

接口返回参数：

点击地图获取地址经纬度代码：

调用API逆地址解析：/ws/geocoder/v1?location=*

javascript 复制代码

<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=*

接口分配额度

接口参数：

接口返回：

代码：

html 复制代码

<el-input v-model="dataStoreAddress" ></el-input>
<el-button type="primary" @click="setLaLo()">根据地址获取经纬度</el-button>

javascript 复制代码

    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小程序百度系经纬度转换为腾讯经纬度方法：

javascript 复制代码

//导航---转换经纬度
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 坐标

javascript 复制代码

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