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/11...

来源:segmentfault

著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

版权声明:本文版权归作者所有,遵循 CC 4.0 BY-SA 许可协议, 转载请注明原文链接
https://segmentfault.com/a/1190000038195524

l7plot入门笔记 - 编程思维

前言前段时间我司领导让做个大屏的展示项目,由于我司的光荣传统,我们并没有设计师,然后领导不知道从哪找的一堆的大屏项目让我参考,于是看着花花绿绿的大屏项目,领导灵光乍泄选中了其中的两个,并对我说,“就用这个,不过你得改改”,“怎么改?”,“我们的主色调用这个,把中间的中国地图换掉换成安徽的,然后做成这样加一个浮动框把这个

一定范围内根据关键词获取经纬度 - 编程思维

为了解决根据关键词获取经纬度,找了半天的地图平台的api都没发现,只能退而求其次,找到了高德的周边搜索,从里面获取了一个能请求在一定范围内的关键词搜索 $content = file_get_contents('http://restapi.amap.com/v3/place/around?key=你的key&

使用腾讯位置服务api如何实现打卡功能? - 编程思维

一、什么是腾讯位置服务腾讯位置服务提供了定位,地图,地点抖索,导航等各种各样的服务。并且提供了各行各业相关行业解决方案,腾讯位置服务在多平台为开发者提供了丰富的地图展现形式,帮助从属于不同领域的开发人员轻松完成构建地图并在其基础上打造专属内容的工作。同时配合海量数据、个性化定制、可视化等能力满足各个行业场景下对地图的需