vue cli 使用腾讯地图

主要功能：

• 根据坐标显示
• 根据位置显示

效果图：

1. 官网注册认证 并申请key

官网地址https://lbs.qq.com/

2. 引入

npm install qqmap --save

import maps from "qqmap"

3. 使用

html：

<div id="container" style=" width: 800px; height:400px; margin: 0 auto">

data：

      //腾讯地图
      map: null,
      getAddress: null,
      getAddCode: null,
      addressKeyword: "",
      shopInfo:{
        lng:'',
        lat:''
      },

js

    initMap () {
        var that = this;
        maps.init("*****"-*****"-*****"-****-****-*****", () => {//你自己的Key
          var myLatlng = new qq.maps.LatLng(22.547931568083015, 114.1306221485138);
          var myOptions = {
            zoom: 16,
            center: myLatlng,
            mapTypeId: qq.maps.MapTypeId.ROADMAP
          };
          that.map = new qq.maps.Map(
            document.getElementById("container"),
            myOptions
          );
          //获取点击后的地址
          qq.maps.event.addListener(that.map, "click", function(event) {
            // 获取点击后的地图坐标
            that.shopInfo.lng = event.latLng.getLng();
            that.shopInfo.lat = event.latLng.getLat();
            that.getAddressCode();
          });

          //调用地址显示地图位置并设置地址
          that.getAddress = new qq.maps.Geocoder({
            complete: function(result) {
              that.map.setCenter(result.detail.location);
              console.log(result.detail.location)
              that.shopInfo.lng = result.detail.location.lng;
              that.shopInfo.lat = result.detail.location.lat;
              var marker = new qq.maps.Marker({
                map: that.map,
                position: result.detail.location
              });
            }
          });
          //通过坐标来显示地图地址
          that.getAddCode = new qq.maps.Geocoder({
            complete: function(result) {
              that.addressKeyword = result.detail.address;
            }
          });
        });
    },
    //通过地址获得位置
    getAddressKeyword() {
      //通过getLocation();方法获取位置信息值
      this.getAddress.getLocation(this.addressKeyword );//调用自带的接口
    },
    // 通过坐标获得地址
    getAddressCode() {
      var lat = parseFloat(this.shopInfo.lat);
      var lng = parseFloat(this.shopInfo.lng);
      var latLng = new qq.maps.LatLng(lat, lng);
      //调用获取位置方法
      this.getAddCode.getAddress(latLng);
    },