vue使用腾讯地图获取经纬度和逆解析获取详细地址

示例

必须在腾讯api中申请自己的key

打开这个webservice用来逆解析详细地址

下面是代码

1 , html创建放地图的容器

<div id="map"></div>

2,在vue的index.html下引入腾讯地图

<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&libraries=service&key=这里填你的key"></script>

3,js

 // 初始化地图
 	import { CMap } from "./CMap";
 	data:(){
		return {
			map:null
		}
	},
	//点击弹窗
	async addHandle() {
      await nextTick();
      this.map && this.map.destroy();
      this.getLatLng();

    },
    initMap(lat, lng) {
      let that = this;
      //center 根据经纬度获取地图中心点
      const center = new TMap.LatLng(lat, lng);
      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",
            //src 定位点的图片箭头
          }),
        },
        geometries: [
          {
            id: "demo",
            styleId: "marker",
            position: new TMap.LatLng(lat, lng),
            properties: {
              title: "marker",
            },
          },
        ],
      });
    },
    // 获取当前经纬度
    getLatLng() {
    //这里的CMap是我引入的一个js在下面有写代码
      CMap("你的key").then((qq) => {
        var geolocation = new qq.maps.Geolocation(
          "你的key",
          "地图"
        );
        geolocation.getLocation(
          (res) => {
            let { lat, lng, addr } = res;
            //这里就是位置信息 可以打印出来看你需要什么;
            //调用初始化地图获取当前地址;传入经纬度
            this.initMap(lat, lng);
          },
          (err) => {
            console.log(err);
          }
        );
      });
    },
    //地址逆解析获取详细地址
    getAreaCode() {
    //这里可以直接this.$jsonp地址传入你的经纬度;
      this.$jsonp("https://apis.map.qq.com/ws/geocoder/v1/?", {
        location: `${this.addFormField.lat},${this.addFormField.lng}`, // 经纬度
        key: "你的key", //这里就是要开启那个service不然会报错让你开启
        output: "jsonp", // output必须jsonp   不然会超时
      }).then((res) => {
      //获取到的res 就是继续的地址的所有信息;
        this.addFormField.take_site_address = res.result.address;
      });
    },
    // 地图点击事件
    clickHandler(evt) {
      let lat = evt.latLng.getLat().toFixed(6);
      let lng = evt.latLng.getLng().toFixed(6);
      this.addFormField.lng = lng;
      this.addFormField.lat = lat;
      //这里的evt有模糊的坐标可以打印看看但是没有街道所以我这做了判断
      //如果有大的目标就取大的目标否则就取街道;
      if (evt.poi) {
        this.addFormField.take_site_address = evt.poi.name;
      } else {
      //调用详细地址函数
        this.getAreaCode();
      }
      //修改id为4的点标记的位置
      this.markerLayer.updateGeometries([
        {
          styleId: "marker",
          id: "demo",
          position: new TMap.LatLng(lat, lng),
        },
      ]);
    },
	//点击生成详细地址
    async setLaLo() {
      if (!this.addFormField.take_site_address)
        return Message.warning("请填写地址");
      var geocoder = new TMap.service.Geocoder();
      geocoder
      //这里是你输入的地址**必须详细省市区+详细地址
        .getLocation({ address: `${this.addFormField.take_site_address}` })
        .then((res) => {
          let { lat, lng } = res.result.location;
          this.addFormField.lng = lng;
          this.addFormField.lat = lat;
           //然后重新绘制
          this.map.setCenter(new TMap.LatLng(lat, lng));
          //修改id为4的点标记的位置
          this.markerLayer.updateGeometries([
            {
              styleId: "marker",
              id: "demo",
              position: new TMap.LatLng(lat, lng),
            },
          ]);
        });
    },

Cmap的js

export function CMap(key) {
  return new Promise(function(resolve, reject) {
    window.init = function() {
      resolve(qq); //注意这里
    };
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'http://map.qq.com/api/js?v=2.exp&callback=init&key=' + key;
    script.onerror = reject;
    document.head.appendChild(script);
  });
}

希望此文章能帮助到您