vue+騰訊地圖 實現座標拾取器功能

需求

1、搜索具體地址，自動填寫經緯度，並在地圖上標記

2、點擊地圖上一點，可重新填寫經緯度並且標記

代碼

• 在dom新建div渲染地圖

<el-form-item label="店鋪地址" prop="address">
  <el-input v-model="fristForm.address"></el-input>
  <el-input
    class="long-lat"
    v-model="fristForm.longitude"
    placeholder="經度"
  ></el-input>
  <el-input
    class="long-lat"
    v-model="fristForm.latitude"
    placeholder="緯度"
  ></el-input>
  <el-button size="mini" type="primary" @click="searchKeyword"
    >搜索</el-button
  >
</el-form-item>
<span class="changeAddress">點擊地圖更換分店定位地址</span>
<!-- 渲染地圖的div容器 -->
<div id="container" class="mapbox"></div>

• js定義地圖變量並設置需求

var searchService,geocoder,map,markersArray = [];
<script>
export default {
    mounted() {
      this.init();
    },
    methods:{
        init() {
          var that = this;
          var center = new qq.maps.LatLng(39.916527, 116.397128);
          var map = new qq.maps.Map(document.getElementById("container"), {
            center: center,
            zoom: 13
          });
          var latlngBounds = new qq.maps.LatLngBounds();
          qq.maps.event.addListener(map, "click", function(event) {
            console.log(event);
            that.fristForm.longitude = event.latLng.getLng(); // 經度
            that.fristForm.latitude = event.latLng.getLat(); // 緯度

            if (markersArray) {
              for (let i in markersArray) {
                markersArray[i].setMap(null);
              }
            }
            var marker = new qq.maps.Marker({
              map: map,
              position: event.latLng
            });
            markersArray.push(marker);
          });

          geocoder = new qq.maps.Geocoder({
            complete: function(result) {
              console.log(result);
              that.fristForm.longitude = result.detail.location.lng;
              that.fristForm.latitude = result.detail.location.lat;
              map.setCenter(result.detail.location);
              var marker = new qq.maps.Marker({
                map: map,
                position: result.detail.location
              });
              markersArray.push(marker);
            }
          });
        },
    },
    // 搜索地址
    searchKeyword() {
      var keyword = this.fristForm.address;
      this.clearOverlays(markersArray);
      //根據輸入的城市設置搜索範圍
      // searchService.setLocation("北京");
      //根據輸入的關鍵字在搜索範圍內檢索
      if (keyword) {
        // searchService.search(keyword);
        geocoder.getLocation(keyword);
      } else {
        alert("請輸入地址");
      }
    },
}
</script>

文檔參考

以上代碼使用的是jsapi功能，目前對應功能已升級JavaScript API GL，地址解析功能可直接調取接口使用，歡迎大家體驗！

地址解析（地址轉座標）

JavaScript API GL參考手冊

作者：houqq

鏈接：https://segmentfault.com/a/1190000022211912

來源：segmentfault

著作權歸作者所有。商業轉載請聯繫作者獲得授權，非商業轉載請註明出處。