高德地图实现批量地址解析,多个地理解析,批量地址转坐标经纬度

高德地图实现批量地址解析,多个地理解析,批量地址转坐标经纬度

很多时候我们知道地址但是想要获取地址的坐标, 相信网上有很多的在线地址解析的工具,这些工具的确给我们带来了很多的便利, 那么我们知道是如何实现的吗?今天就一起分享一下在高德地图里面如何实现使用js实现地理解析,地址转换为经纬度的吧。

首先看一下效果图吧:

 

 

这样我们下面来实现一下如图所示的功能:

第一步: 初始化地图(高德地图)


createMap() {
      this.$amap = new AMap.Map("mapcontainer", {
        resizeEnable: true,
        center: [116.405285, 39.904989],
        zoom: 6
      });

      this.geocoder = new AMap.Geocoder({
        city: "010",
      });
    },

//mapcontainer  是地图容器的id

第二步: 获取地址列表

<el-input type="textarea" 
    :autosize="{ minRows: 6, maxRows: 12 }" 
    placeholder="请输入地址,用回车键分开" 
    v-model="addresses"
    resize="none">
</el-input>

<el-button
      type="primary"
      icon="el-icon-sort"
      class="regeoBtn"
      :loading="regeoBtn"
      @click="geo()">
转换
</el-button>
data(){
    addresses: "朝阳区阜荣街10号"
}

— 点击转换–> 获取地址信息 –> 地址信息转换为数组addressList

geo() {
      this.regeoBtn = true;
      this.addressData = []
      // 重置markers
      this.$amap.remove(this.markers);
      this.markers = [];
      let addressList = this.addresses.trim().split("\n");
}

第三步:批量地址转换坐标,批量添加marker,获取地址转换列表

// 地址-》坐标
      geocoder.getLocation(addressList, function(status, result) {
        setTimeout(() => {
            _this.regeoBtn = false;
            if (status === 'complete'&&result.geocodes.length) {
                for(var i=0;i<result.geocodes.length;i+=1){
                    let marker = new AMap.Marker({
                        position: result.geocodes[i].location
                    });
                    _this.markers.push(marker);
                    _this.addressData.push({
                        lnglats:result.geocodes[i].location,
                        formattedAddress:result.geocodes[i].formattedAddress
                      })   
                }
                _this.$amap.add(_this.markers);
                _this.$amap.setFitView(_this.markers);
            }
        },600)
        
      });
— geocoder.getLocation: 高德地图 地址->坐标
— result.geocodes: 转换的所有结果,遍历可以获得我们想要的列表
转换成功后在地图上添加marker,在JS vue下 实现高德地图定位,获取当前经纬度,添加marker 文章中,有告诉怎么添加marker。
如上代码就是利用高德地图实现批量地址解析,多个地理解析,批量地址转坐标经纬度,希望可以帮助到大家, 有不理解的,或者有更好的方法可以跟我一起交流分享哦。
微信关注“优月优”公众号,获取更多学习资源
微信公众号
关注我们,每天及时接收最新的学习资料
14800人已关注
分享到:
赞(5) 打赏

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏