vue使用腾讯地图

官方地址

先来展示效果图（输入框、文字就不管了自己写就行）

1、创建应用和Key

参照官方文档即可

2、页面引入

在public\index.html页面引入

<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=xxxxxx"></script>

其中key绑定的值就是

可以上代码了

<div id='mapContainer' style="width:100%;height:500px"></div>

init() {
      this.$nextTick(()=>{
        //获取dom节点
        var drawContainer = document.getElementById('mapContainer');
        // var center = new window.TMap.LatLng(39.984104, 116.307503);//设置中心点坐标   lat: 23.228237   lng: 113.273747
        //如果是回显的话直接把经纬度传进去就行
        var center = new window.TMap.LatLng(this.latitude, this.longitude);
        this.map = new window.TMap.Map(drawContainer, {
          zoom: 18,
          // pitch: 40,
          center: center,
          draggable: true,
          scrollable: true,
          mapStyleId: "style 1"
        });
        // 初始化marker
        this.marker = new window.TMap.MultiMarker({
          id: 'marker-layer', // 图层id
          map: this.map,
          geometries: [
            {
              "id": "1",   //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
              "styleId": 'myStyle',  //指定样式id
              "position": new TMap.LatLng(this.latitude, this.longitude),  //点标记坐标位置
              "properties": {}
            }
          ]
        })
        
        this.map.on("click", (evt) => {
          console.log(evt.poi)
          // this.searchValue = evt.poi.name
          this.latitude = evt.poi.latLng.lat
          this.longitude = evt.poi.latLng.lng
          this.jingdu = evt.poi.latLng.lng
          this.weidu = evt.poi.latLng.lat
          // this.address = evt.poi.name
          //点击地图进行标点
          this.addPoint(this.latitude,this.longitude) 
          //逆地址解析，根据经纬度获取当前地址名称
          this.getAreaCode()                
        });
      })
      
    },
 addPoint(latitude,longitude) {
        //修改id为1的点标记的位置  点可以设置多个，我这里只需要一个因此修改就行
        this.marker.updateGeometries([
            {
            "styleId":"myStyle",
            "id": "1",
            "position": new window.TMap.LatLng(latitude, longitude),
            }
        ])
    },
//地址逆解析获取详细地址
    getAreaCode( ) {
    //这里可以直接this.$jsonp地址传入你的经纬度;
      this.$jsonp("https://apis.map.qq.com/ws/geocoder/v1/?", {
        location: this.latitude+ ',' + this.longitude, // 经纬度
        key: "xxxxxx", //这里就是要开启那个service不然会报错让你开启
        output: "jsonp", // output必须jsonp   不然会超时
      }).then((res) => {
      //获取到的res 就是继续的地址的所有信息;
        console.log(res)
      });
    },