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

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

很多时候我们知道地址但是想要获取地址的坐标， 相信网上有很多的在线地址解析的工具，这些工具的确给我们带来了很多的便利， 那么我们知道是如何实现的吗？今天就一起分享一下在高德地图里面如何实现使用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)
        
      });