vue的腾讯地图插件使用教程

vue的腾讯地图插件使用教程（点击获取附近位置和经纬度）

地图插件

 import maps from "qqmap";

效果图

废话不多说上代码

<template>
  <div>
    腾讯地图
    <div
      class="mapfont"
      style="width: 100%"
    >
      <el-row>
        <el-col
          :lg="23"
          :xl="23"
          :md="23"
          :sm="23"
          :xs="23"
          class="tips"
        >
          温馨提示：查询不到输入的位置时，请输入城市及完整的地域名！！！
        </el-col>
        <el-col
          :lg="1"
          :xl="1"
          :md="1"
          :sm="1"
          :xs="1"
          class="nobut"
        >
          <span @click="nobut">X</span>
        </el-col>
      </el-row>
      <el-input
        v-model="addressKeyword"
        placeholder="请输入地址来直接查找相关位置"
        clearable
      >
        <el-button
          slot="append"
          icon="el-icon-search"
          @click="getAddressKeyword"
        />
      </el-input>
      <div
        id="container"
        style="width: 100%; height: 700px;"
      />
      <div class="ybut">
        <el-button @click="nobut">
          取消
        </el-button><el-button
          type="primary"
          @click="mapbut"
        >
          提交
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
import $ from "jquery";
import maps from "qqmap"
export default {
   data(){
       return{
           //腾讯地图
      map: null,
      getAddress: null,
      getAddCode: null,
      addressKeyword: "",

     
      longitude: 0, //经度
      latitude: 0, //纬度
      Latitudeandlongitude: "", //经纬度
      address: "", //地址
       }
   },
   mounted() {
         this.inits();
   },
   methods:{
      //地图
    mapoff() {
    },
    nobut() {
      this.address="";
    },
    mapbut(){

      if(this.address==""){
          this.$message({
          message: '您还没有选择位置，请选择位置！！！',
          type: 'warning'
        });
      }else{
       var i= "经度："+ this.longitude +",纬度："+ this.latitude
          alert( i +"地址:"+ this.address)
      }
    },

    //初始化地图
    inits() {
      var that = this;
      //使用自己的腾讯地图key
      maps.init("W3YBZ-NW734-APUUL-XQTC4-76L2T-XXXX", () => {
        var myLatlng = new qq.maps.LatLng(
          30.45569387962833,
          114.42734017968178
        );
        var myOptions = {
          zoom: 15,
          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) {
          var marker = new qq.maps.Marker({
            position: event.latLng,
            map: that.map
          });
          // 获取点击后的地图坐标
          that.longitude = event.latLng.lng; //经度
          that.latitude = event.latLng.lat; //纬度
          //  console.log("获取位置")
          that.getAddressCode();
          qq.maps.event.addListener(that.map, "click", function(event) {
            marker.setMap(null);
          });
        });

        //调用地名显示地图位置并设置地址
        that.getAddress = new qq.maps.Geocoder({
          complete: function(result) {
            that.map.setCenter(result.detail.location);
            /输入调用地图经纬度和地址
            that.longitude = result.detail.location.lat; //经度
            that.latitude = result.detail.location.lng; //纬度
            that.Latitudeandlongitude = that.longitude + "," + that.latitude; //经纬度
            //获取地理位置
            var data = {
              location: that.Latitudeandlongitude,
              /*换成自己申请的key*/
              key: "Z6DBZ-JUHEX-GDY4N-T6BDJ-Y24OJ-XXXX",
              get_poi: 0
            };
            var url = "https://apis.map.qq.com/ws/geocoder/v1/?";
            data.output = "jsonp";
            $.ajax({
              type: "get",
              dataType: "jsonp",
              data: data,
              jsonp: "callback",
              jsonpCallback: "QQmap",
              url: url,
              success: function(json) {
                var toStr = JSON.stringify(json);
                that.address =
                  json.result.address +
                  json.result.formatted_addresses.recommend;
                       alert(that.Latitudeandlongitude+";"+that.address)
                  // console.log("地名调用")
              },
              error: function(err) {
                alert("服务端错误，请刷新浏览器后重试");
              }
            });

          }
        });
        //通过坐标来显示地图地址
        that.getAddCode = new qq.maps.Geocoder({
          complete: function(result) {
            that.addressKeyword = result.detail.address;
          }
        });
      });
    },
    //通过地址获得位置！！！！！！！！
    getAddressKeyword() { 
      //通过getLocation();方法获取位置信息值
      this.getAddress.getLocation(this.addressKeyword); //调用自带的接口
    },
    // 通过坐标获得地址
    getAddressCode() {
      var that = this;
      var lat = parseFloat(that.latitude);
      var lng = parseFloat(that.longitude);
      var latLng = new qq.maps.LatLng(lat, lng);
      that.Latitudeandlongitude = lat + "," + lng;
      //获取地理位置
      var data = {
        location: that.Latitudeandlongitude,
        /*换成自己申请的key*/
        key: "Z6DBZ-JUHEX-GDY4N-T6BDJ-Y24OJ-XXXX",
        get_poi: 0
      };
      var url = "https://apis.map.qq.com/ws/geocoder/v1/?";
      data.output = "jsonp";
      $.ajax({
        type: "get",
        dataType: "jsonp",
        data: data,
        jsonp: "callback",
        jsonpCallback: "QQmap",
        url: url,
        success: function(json) {
          var toStr = JSON.stringify(json);
          that.address =
             json.result.formatted_addresses.recommend;
          // that.form.classField = that.address;
           alert(that.Latitudeandlongitude+";"+that.address)

          that.getAddCode.getAddress(latLng);
        },
        error: function(err) {
          alert("服务端错误，请刷新浏览器后重试");
        }
      });
    }
   }
}
</script>

<style>

</style>