您当前位置： 微信小程序JS API > 开发指南 > 获取地图数据 > 地址解析

地址解析

更新时间：2019年07月03日

简介

      地址解析，简单来讲就是将结构化地址（省/市/区/街道/门牌号）解析为对应的经纬度坐标。比如将"北京市海淀区上地十街10号"转化为"116.30051,40.0511"。当然，地址结构越完整，地址内容越准确，解析的坐标精度也会越高。

      使用该地址解析服务进行检索，返回的结果包含marker数组数据和完整数据两项。marker数组数据符合小程序marker规范，可以直接用于小程序map中；完整数据包含该服务接口返回的所有详尽的数据，方便开发者进行自定义开发。

实现方法

1

打开快速创建的微信小程序 pages/index/index.js 文件，用下面的代码完全替换原代码

在以下的代码中，首先引用百度地图微信小程序JavaScript API 模块，然后在页面的onLoad中声明BMapWX对象，最后调用BMapWX.geocoding方法进行地址解析（将地址信息转换为经纬度）。

// 引用百度地图微信小程序JSAPI模块 
var bmap = require('../../libs/bmap-wx.min.js'); 
var wxMarkerData = []; 
Page({ 
    data: { 
        markers: [], 
        latitude: , 
        longitude: , 
        rgcData: {} 
    }, 
    onLoad: function() { 
        var that = this; 
        // 新建百度地图对象 
        var BMap = new bmap.BMapWX({ 
            ak: '您的ak' 
        }); 
        var fail = function(data) { 
            console.log(data) 
        }; 
        var success = function(data) { 
            wxMarkerData = data.wxMarkerData; 
            that.setData({ 
                markers: wxMarkerData 
            }); 
            that.setData({ 
                latitude: wxMarkerData[0].latitude 
            }); 
            that.setData({ 
                longitude: wxMarkerData[0].longitude 
            }); 
        } 
        // 发起geocoding检索请求 
        BMap.geocoding({ 
            address: "北京市海淀区上地十街10号", 
            fail: fail, 
            success: success, 
            iconPath: '../../img/marker_red.png', 
            iconTapPath: '../../img/marker_red.png' 
        }); 
    }, 
})

2

为能够正常展示地图和检索结果，打开 pages/index/index.wxml 文件，用下面的代码完全替换原代码

<view class="map_container"> 
  <map class="map" id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" show-location="true" markers="{{markers}}" bindmarkertap="makertap"></map> 
</view> 
<view class="rgc_info"> 
  <text>经度：{{longitude}}</text> 
  <text>纬度：{{latitude}}</text> 
</view>

3拷贝样式代码到 pages/index/index.wxss文件

.map_container{ 
    height: 420px; 
    width: 100%; 
} 
  
.map { 
    height: 100%; 
    width: 100%; 
}
    
.rgc_info {
    padding: 5px;
}
.rgc_info {
    display: block;
}

4最后保存修改，即可看到示例效果

本示例在页面加载完成后对当前定位点进行了地址解析，点击marker可以看到当前地点的相关位置描述信息。