腾讯地图点击地图时只添加一个标记+检索服务

腾讯地图开发文档：https://lbs.qq.com/webApi/javascriptV2/jsGuide/jsOverview

腾讯地图开发文档：https://lbs.qq.com/service/webService/webServiceGuide/webServiceOverview

开发需求：

1. 点击地图时只添加一个标记
2. 搜索输入的地址并展示在地图上（检索服务）

重要代码如下：

• 页面引入

<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=申请的密钥&libraries=place"></script>

• 地图dom元素

<el-form-item label="详细地址" prop="detailedAddress">
     <el-input v-model="editData.detailedAddress" ref="place"></el-input>
</el-form-item>
<el-form-item label="">
     <div id="map" ref="map" style="height: 270px"></div>
</el-form-item>

• 封装的方法 

mapInit(lng, lat) {
      let that = this;
      var marker;
      // 创建地图实例
      let center = new qq.maps.LatLng(lat || 29.548816 , lng || 106.545714);//设置中心点坐标
      //初始化地图
      var map = new qq.maps.Map(this.$refs.map, {
        center,//设置地图中心点坐标
        zoom: 13 //设置地图缩放级别
      });
      
      //标注表示地图上的点，可自定义标注的图标
      marker = new qq.maps.Marker({
        position: center,
        map: map
      });

      //文本输入提示
      var ap = new qq.maps.place.Autocomplete(
        this.$refs.place.$el.querySelector("input")
      );

      var keyword = "";
      //调用Poi检索类。用于进行本地检索、周边检索等服务。
      var searchService = new qq.maps.SearchService({
        complete: function(results) {
          console.log(results);
          if (results.type === "CITY_LIST") {
            searchService.setLocation(results.detail.cities[0].cityName);
            searchService.search(keyword);
            return;
          }
          var pois = results.detail.pois;
          var latlngBounds = new qq.maps.LatLngBounds();
          latlngBounds.extend(pois[0].latLng);
          map.fitBounds(latlngBounds);
          
          //对搜索的地址添加标注
          let searchCenter = new qq.maps.LatLng(pois[0].latLng.lat || 29.548816 , pois[0].latLng.lng || 106.545714);
          marker = new qq.maps.Marker({
              position: searchCenter,
              map: map
          });
        }
      });

      //添加监听事件  获取鼠标点击事件
      qq.maps.event.addListener(map, "click", function(event) {
        console.log("event", event);
        let { lat, lng } = event.latLng;
        that.editData.latitude = lat;
        that.editData.longitude = lng;
        if (!marker) {
          marker = new qq.maps.Marker({
            position: event.latLng,
            map: map
          });
        } else {
          marker.setPosition(event.latLng);
        }
        
        //需要后端封装此接口解决跨域 https://apis.map.qq.com/ws/geocoder/v1/?location=39.984154,116.307490&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&get_poi=1
        let url = 接口 + '?key=申请的密钥&location='+lat +','+lng+'&getPoi=0';
        that.get(url).then(res => {
               const addComp = res.data.result.address_component;
               const detailedAddress =  addComp.province + addComp.city + addComp.district + addComp.street + addComp.street_number;
               that.editData.detailedAddress =  detailedAddress;
        })
      });

      //添加监听事件
      qq.maps.event.addListener(ap, "confirm", function(res) {
        keyword = res.value;
        searchService.search(keyword);
      });
    },