vue 对接腾讯地图

1、从腾讯地图API官网注册一个开发秘钥
2.、index.html引入相关js文件

//地图api
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=yourkey"></script>
//定位
 <script type="text/javascript" src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>

3.在vue页面中编写

<template>
  <div>
    <el-form :model="formData">
      <el-form-item label="地理位置:">
        <el-input type="text" placeholder="" v-model.trim="formData.location"></el-input>
      </el-form-item>
      <el-form-item label="详细地址:">
        <div class="map-box">
          <el-popover popper-class="createBook-pop" placement="bottom-start" ref="pop" trigger="manual" :visible-arrow="false">
            <ul>
              <li v-for="(item,index) in placeList" :key="index" @click="selectCom(item)">
                {{ item.address }}
              </li>
            </ul>
            <el-input v-model.trim="formData.address" maxlength="30" @keyup.native="
                    e => (formData.name = e.target.value.replace(/\s/g, ''))
                  " placeholder="搜索地址" @input="getSearchPlace" @focus="focusShow" slot="reference"></el-input>
          </el-popover>
          <!-- 地图插件-->
          <div id="container" style="width:800px;height:450px" class="mt-30"></div>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
var _this;


export default {
  data () {
    return {
      formData: {
        address: "",
        location: "",
        lng: "",
        lat: ""
      },
      //地图对象
      map: null,
      //地图中心
      center: { lat: 22.55329, lng: 113.88308 },
      marker: null,
      //周边地址检索列表
      placeList: []
    };
  },
  mounted () {
    _this = this;
    this.initMap();
  },
  methods: {
    //选择周边地址
    selectCom (row) {
      this.$refs["pop"].doClose();
      this.center = row.latLng;
      this.removeMarker();
      this.createMarker(row.latLng);
      this.formData.address = row.address
      this.formData.location = [row.latLng.lat, row.latLng.lng].join(",");
      this.formData.lat = row.latLng.lat;
      this.formData.lng = row.latLng.lng;
      this.map.setCenter(row.latLng);
    },
    //显示搜索列表
    focusShow (e) {
      if (this.placeList.length) {
        this.$refs["pop"].doShow();
      }
    },
    // 根据输入地址进行逆向解析
    async getSearchPlace () {
      if (this.formData.address === '') {
        _this.placeList = []
        this.$refs["pop"].doClose();
        return
      }
      //设置Poi检索服务，用于本地检索、周边检索
      let searchService = new qq.maps.SearchService({
        pageCapacity: 20,
        complete: function (res) {
          if (res.detail && res.detail.pois && res.detail.pois.length) {
            let placeList = res.detail.pois.map(v => {
              return { latLng: v.latLng, address: v.address ? v.address : '' + v.name ? v.name : '' }
            })
            _this.placeList = placeList
            _this.$refs["pop"].doShow();
          } else {
            _this.$refs["pop"].doClose();
          }
        },
      })
      searchService.setLocation('');
      searchService.search(this.formData.address);
    },
    //地址逆向解析
    geocoderAddress ({ lat, lng }) {
      var geocoder = new qq.maps.Geocoder({
        complete: function (res) {
          // 标志位置
          let center = new qq.maps.LatLng(lat, lng);
          _this.center = center;
          _this.formData.address =
            res.detail.nearPois[0].address + res.detail.nearPois[0].name;
          _this.formData.location = [
            res.detail.nearPois[0].latLng.lat,
            res.detail.nearPois[0].latLng.lng
          ].join(",");
          _this.formData.lat = res.detail.nearPois[0].latLng.lat;
          _this.formData.lng = res.detail.nearPois[0].latLng.lng;
        }
      });
      var latLng = new qq.maps.LatLng(lat, lng);
      geocoder.getAddress(latLng);
    },
    // 定位
    getGeolocation () {
      var geolocation = new qq.maps.Geolocation(
        "yourkey",
        "xxxx"
      );
      // 定位成功之后调用的方法
      function showPosition (position) {
        _this.map.setCenter(new qq.maps.LatLng(position.lat, position.lng));
        // 逆地址解析(经纬度到地名转换过程)
        _this.geocoderAddress(position);
      }
      function showErr () {
        console.log("定位失败");
      }
      geolocation.getLocation(showPosition, showErr);
    },
    //创建标记
    createMarker (center) {
      //创建一个Marker
      _this.marker = new qq.maps.Marker({
        position: center,
        map: _this.map
      });
      //自定义marker
      //设置Marker的可见性，为true时可见,false时不可见，默认属性为true
      _this.marker.setVisible(true);
      //设置Marker的动画属性为从落下
      _this.marker.setAnimation(qq.maps.MarkerAnimation.DOWN);
      //设置Marker是否可以被拖拽，为true时可拖拽，false时不可拖拽，默认属性为false
      _this.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://wqbjz-pro.oss-cn-shenzhen.aliyuncs.com/4RWt4w_1602323235266.png",
          size,
          origin,
          anchor
        );
      _this.marker.setIcon(icon);
      //标记Marker点击事件
      // qq.maps.event.addListener(marker, 'click', function () {
      // TODO
      // });
      //设置Marker停止拖动事件
      qq.maps.event.addListener(_this.marker, 'dragend', function () {
        _this.center = _this.marker.getPosition();
        // 获取经纬度逆解析地址
        _this.geocoderAddress(_this.marker.getPosition());
      });

    },
    //移除marker事件
    removeMarker () {
      if (_this.marker) {
        _this.marker.setMap(null);
        _this.marker = null;
      }
    },
    // 初始化地址
    initMap () {
      var center = new qq.maps.LatLng(this.center.lat, this.center.lng);
      var map = new qq.maps.Map(document.getElementById("container"), {
        center: center,
        zoom: 15
      });
      this.map = map;
      this.createMarker(center);
      this.geocoderAddress(center);

      // // 监听地图点击事件
      // qq.maps.event.addListener(map, "click", function (event) {
      //  
      //   // 获取经纬度逆解析地址
      //   _this.geocoderAddress(event.latLng);
      //   // map.setCenter(event.latLng);
      // });
      setTimeout(() => {
        this.getGeolocation();
      }, 500)
    }
  },

};
</script>