vue引入腾讯地图demo

<template>
  <div>
    <div class="mapfont" style="width: 100%" id="mapcon">
      <!-- <el-input
        v-model="addressKeyword"
        placeholder="请输入地址来直接查找相关位置"
        clearable
      > -->
      <el-autocomplete
      class="inline-input"
      v-model="addressKeyword"
      :fetch-suggestions="querySearch"
      placeholder="请输入地址匹配相关位置"
      @select="onSelect"
      clearable
      size="medium"
      style="width:500px"
    ></el-autocomplete>
        <el-button
          slot="append"
          icon="el-icon-search"
          @click="getAddressKeyword"
        />
      </el-input>
      <div id="container" style="width: 100%; height: 400px" />
      <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: "",

      latitude: 0, //经度
      longitude: 0, //纬度
      Latitudeandlongitude: "", //经纬度
      address: "", //地址
      addressList: [],
    };
  },
  mounted() {
    // this.initLocal();
    this.inits();
  },
  methods: {
    querySearch(queryString, cb) {
      // 调用 callback 返回建议列表的数据
      let that = this;
      if (queryString.length <= 0) {
        //用于接收地址列表的数组，在data声明
        that.addressList = [];
        return;
      }
      this.$axios({
        //this代表vue对象，之前在入口文件中把axios挂载到了vue中，所以这里直接用this.$axios调用axios对象
        method: "get",
        dataType: "json",
        async: false, //关闭异步
        url: "/qqmap/ws/place/v1/suggestion",
        params: {
          key: "your key",
          keyword: queryString,
        },
      })
        .then(function (res) {
          console.log(res);
          let list = res.data.data;
          for (let i = 0; i < list.length; i++) {
            let obj = {};
            obj.value = list[i].title;
            obj.address = list[i].address;
            that.addressList.push(obj);
          }
          console.log(that.addressList);
          cb(that.addressList);
        })
        .catch(function (err) {
          console.log(err);
          cb(that.addressList);
        });
      //在执行这一步之前要配置跨域，不然会报错
    },
    onSelect() {
      console.log("111");
      this.$axios({
        methods: "get",
        url: "https://apis.map.qq.com/ws/place/v1/suggestion",
        data: {
          keyword: this.addressKeyword,
          region: this.select,
          refere: "your key",
        },
      }).then((res) => {
        console.log(res.data);
      });
    },
    //地图
    mapoff() {},
    nobut() {
      this.address = "";
    },
    mapbut() {
      // if(this.addressKeyword==""){
      //     this.$message({
      //     message: '您还没有选择位置，请选择位置！！！',
      //     type: 'warning'
      //   });
      // }else{
      // var i =
      //   "经度：" +
      //   this.longitude +
      //   ",纬度：" +
      //   this.latitude +
      //   ",地址：" +
      //   this.address;
      // alert(i + "地址:" + this.addressKeyword);
      // // }
      this.$emit("savelocalton", this.longitude, this.latitude);
    },
    //初始化获取当前位置信息
    initLocal() {
      let that = this;
      var geolocation = new qq.maps.Geolocation(
        "your key",
        "container"
      );
      // 定位成功之后调用的方法
      function showPosition(position) {
        that.latitude = position.lat;
        that.longitude = position.lng;
        console.log(that.latitude);
        console.log(that.longitude);
        that.inits();
      }
      function showErr() {
        console.log("定位失败");
        that.inits();
      }
      geolocation.getLocation(showPosition, showErr);
    },

    //初始化地图
    inits() {
      var that = this;
      //使用自己的腾讯地图key
      maps.init("your key", () => {
        var myLatlng = new qq.maps.LatLng(that.latitude, that.longitude);
        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.map.setZoom(15);
            //输入调用地图经纬度和地址
            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: "your key",
              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);
                // alert(that.Latitudeandlongitude);
                that.markerPoint(that.longitude, that.latitude, that.map);
                // if (json.status == 190) {
                //   alert(that.Latitudeandlongitude);
                // var marker = new qq.maps.Marker({
                //   //设置Marker的位置坐标
                //   position: that.Latitudeandlongitude,
                //   //设置显示Marker的地图
                //   map: that.map,
                // });
                // } else {
                //   that.address =
                //     toStr.result.address +
                //     toStr.result.formatted_addresses.recommend;
                //   alert(that.Latitudeandlongitude);
                // }

                // console.log("地名调用")
              },
              error: function (err) {
                // alert("服务端错误，请刷新浏览器后重试");
              },
            });
          },
        });
        //通过坐标来显示地图地址
        that.getAddCode = new qq.maps.Geocoder({
          complete: function (result) {
            that.addressKeyword = result.detail.address;
          },
        });
      });
    },
    markerPoint(lon, lat, map) {
      let that = this;
      var marker = new qq.maps.Marker({
        position: new qq.maps.LatLng(lon, lat),
        map: map,
      });
      // 获取点击后的地图坐标
      that.longitude = lat; //经度
      that.latitude = lon; //纬度
      //  console.log("获取位置")
      that.getAddressCode();
      qq.maps.event.addListener(map, "click", function (event) {
        marker.setMap(null);
      });
      // var center = new qq.maps.LatLng(lon, lat);
      // // var map = new qq.maps.Map(document.getElementById("container"), {
      // //   center: center,
      // //   zoom: 16,
      // // });
      // //创建一个Marker
      // var marker = new qq.maps.Marker({
      //   //设置Marker的位置坐标
      //   position: center,
      //   //设置显示Marker的地图
      //   map: map,
      // });

      // //设置Marker的可见性，为true时可见,false时不可见，默认属性为true
      // marker.setVisible(true);
      // //设置Marker的动画属性为从落下
      // marker.setAnimation(qq.maps.MarkerAnimation.DOWN);
      // //设置Marker是否可以被拖拽，为true时可拖拽，false时不可拖拽，默认属性为false
      // marker.setDraggable(true);
      // 设置Marker自定义图标的属性，size是图标尺寸，该尺寸为显示图标的实际尺寸，origin是切图坐标，该坐标是相对于图片左上角默认为（0,0）的相对像素坐标，anchor是锚点坐标，描述经纬度点对应图标中的位置
      // var anchor = new qq.maps.Point(0, 39),
      //   size = new qq.maps.Size(42, 68),
      //   origin = new qq.maps.Point(0, 0),
      //   icon = new qq.maps.MarkerImage(
      //     "https://lbs.qq.com/doc/img/nilt.png",
      //     size,
      //     origin,
      //     anchor
      //   );
      // marker.setIcon(icon);
      // //设置Marker阴影图片属性，size是图标尺寸，该尺寸为显示图标的实际尺寸，origin是切图坐标，该坐标是相对于图片左上角默认为（0,0）的相对像素坐标，anchor是锚点坐标，描述经纬度点对应图标中的位置
      // // var anchorb = new qq.maps.Point(3, -30),
      // //   sizeb = new qq.maps.Size(42, 11),
      // //   origin = new qq.maps.Point(0, 0),
      // //   iconb = new qq.maps.MarkerImage(
      // //     "https://lbs.qq.com/doc/img/nilb.png",
      // //     sizeb,
      // //     origin,
      // //     anchorb
      // //   );
      // // marker.setShadow(iconb);
      // //设置标注的名称，当鼠标划过Marker时显示
      // marker.setTitle("测试");

      // //添加信息窗口
      // var info = new qq.maps.InfoWindow({
      //   map: map,
      // });
      // //获取标记的可拖动属性
      // info.open();
      // info.setContent("标记的可拖动属性为：" + marker.getDraggable());
      // info.setPosition(marker.getPosition());
      // //标记Marker点击事件
      // qq.maps.event.addListener(marker, "click", function () {
      //   info.open();
      //   info.setContent(
      //     '<div style="text-align:center;white-space:nowrap;' +
      //       'margin:10px;">单击标记</div>'
      //   );
      //   info.setPosition(marker.getPosition());
      // });
      // //设置Marker停止拖动事件
      // qq.maps.event.addListener(marker, "dragend", function () {
      //   info.open();
      //   info.setContent(
      //     '<div style="text-align:center;white-space:nowrap;' +
      //       'margin:10px;">拖动标记</div>'
      //   );
      //   //getPosition()  返回Marker的位置
      //   info.setPosition(marker.getPosition());
      // });
    },
    //通过地址获得位置！！！！！！！！
    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: "your key",
        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>
.mapfont div:nth-child(2) a:nth-child(1) {
  display: none !important;
}

.mapfont div:nth-child(3) div:nth-child(2) span:nth-child(1) {
  display: none !important;
}
</style>