关于腾讯地图:vue腾讯位置服务-实现坐标拾取器功能

56次阅读

共计 1925 个字符，预计需要花费 5 分钟才能阅读完成。

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 参考手册