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

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

示例

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

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

下面是代码

1 , html创建放地图的容器

<div id="map">div>
1

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

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

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),
            },
          ]);
        });
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129

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

1
2
3
4
5
6
7
8
9
10
11
12
13

希望此文章能帮助到您