浏览器版本低!无法浏览完整内容,建议升级或更换浏览器。

文档全面上新

更科技的视觉体验,更高效的页面结构,快前往体验吧!

体验新版
(以“{{wxjsapi-sidebar}}<div class="h1-title">地址解析</div><div id="update-time">更新时间:2019年07月03日</div>&l...”为内容创建页面)
 
 
(未显示1个用户的21个中间版本)
第1行: 第1行:
&#x7B;&#x7B;wxjsapi-sidebar&#x7D;&#x7D;&lt;div class="h1-title"&gt;地址解析&lt;/div&gt;&lt;div id="update-time"&gt;更新时间:2019年07月03日&lt;/div&gt;&lt;div class="bluetitle"&gt;&lt;div class="services-title-text"&gt;简介&lt;/div&gt;&lt;/div&gt;&lt;div class="serve-explain-text"&gt;通过地址解析,可以将结构化地址(省/市/区/街道/门牌号)解析为对应的经纬度坐标。比如将"北京市海淀区上地十街10号"转化为"116.30051,40.0511"。<br/>地址结构越完整,地址内容越准确,解析的坐标精度也会越高。<br/>地址解析服务检索返回的结果包含marker数组数据和完整数据两项。marker数组数据符合小程序marker规范,可以直接用于小程序map中;完整数据包含该服务接口返回的所有详尽的数据,方便开发者进行自定义开发。<br/>&lt;/div&gt;&lt;div class="bluetitle"&gt;&lt;div class="services-title-text"&gt;实现方法&lt;/div&gt;&lt;/div&gt;&lt;div class="devguide"&gt;&lt;div class="leftborderbg" style="height:5000px;"&gt;&lt;/div&gt;&lt;div class="devguideorder"&gt;&lt;span&gt;1&lt;/span&gt;打开快速创建的微信小程序 pages/index/index.js 文件,用下面的代码完全替换原代码&lt;/div&gt;&lt;div class="devguidecenter"&gt;<br/>在以下的代码中,首先引用百度地图微信小程序JavaScript API 模块,然后在页面的onLoad中声明BMapWX对象,最后调用BMapWX.regeocoding方法进行逆地址解析(从经纬度转换为地址信息)。<br/>&lt;pre class="prettyprint codestyle"&gt;// 引用百度地图微信小程序JSAPI模块&nbsp;<br/>var bmap = require('../../libs/bmap-wx.js');&nbsp;<br/>var wxMarkerData = [];&nbsp;<br/>Page({&nbsp;<br/>&nbsp; &nbsp; data: {&nbsp;<br/>&nbsp; &nbsp; &nbsp; &nbsp; markers: [],&nbsp;<br/>&nbsp; &nbsp; &nbsp; &nbsp; latitude: '',&nbsp;<br/>&nbsp; &nbsp; &nbsp; &nbsp; longitude: '',&nbsp;<br/>&nbsp; &nbsp; &nbsp; &nbsp; rgcData: {}&nbsp;<br/>&nbsp; &nbsp; },&nbsp;<br/>&nbsp; &nbsp; makertap: function(e) {&nbsp;<br/>&nbsp; &nbsp; &nbsp; &nbsp; var that = this;&nbsp;<br/>&nbsp; &nbsp; &nbsp; &nbsp; var id = e.markerId;&nbsp;<br/>&nbsp; &nbsp; &nbsp; &nbsp; that.showSearchInfo(wxMarkerData, id);&nbsp;<br/>&nbsp; &nbsp; },&nbsp;<br/>&nbsp; &nbsp; onLoad: function() {&nbsp;<br/>&nbsp; &nbsp; &nbsp; &nbsp; var that = this;&nbsp;<br/>&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;// 新建百度地图对象&nbsp;<br/>&nbsp; &nbsp; &nbsp; &nbsp; var BMap = new bmap.BMapWX({&nbsp;<br/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ak: '您的ak'&nbsp;<br/>&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp;<br/>&nbsp; &nbsp; &nbsp; &nbsp; var fail = function(data) {&nbsp;<br/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(data)&nbsp;<br/>&nbsp; &nbsp; &nbsp; &nbsp; };&nbsp;<br/>&nbsp; &nbsp; &nbsp; &nbsp; var success = function(data) {&nbsp;<br/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; wxMarkerData = data.wxMarkerData;&nbsp;<br/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; that.setData({&nbsp;<br/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; markers: wxMarkerData&nbsp;<br/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp;<br/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; that.setData({&nbsp;<br/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; latitude: wxMarkerData[0].latitude&nbsp;<br/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp;<br/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; that.setData({&nbsp;<br/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; longitude: wxMarkerData[0].longitude&nbsp;<br/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp;<br/>&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp;<br/>&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;// 发起regeocoding检索请求&nbsp;<br/>&nbsp; &nbsp; &nbsp; &nbsp; BMap.regeocoding({&nbsp;<br/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fail: fail,&nbsp;<br/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; success: success,&nbsp;<br/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; iconPath: '../../img/marker_red.png',&nbsp;<br/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; iconTapPath: '../../img/marker_red.png'&nbsp;<br/>&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp;<br/>&nbsp; &nbsp; },&nbsp;<br/>&nbsp; &nbsp; showSearchInfo: function(data, i) {&nbsp;<br/>&nbsp; &nbsp; &nbsp; &nbsp; var that = this;&nbsp;<br/>&nbsp; &nbsp; &nbsp; &nbsp; that.setData({&nbsp;<br/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; rgcData: {&nbsp;<br/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; address: '地址:' + data[i].address + '\n',&nbsp;<br/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; desc: '描述:' + data[i].desc + '\n',&nbsp;<br/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; business: '商圈:' + data[i].business&nbsp;<br/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp;<br/>&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp;<br/>&nbsp; &nbsp; }&nbsp;<br/><br/>})<br/>&lt;/pre&gt;<br/>&lt;/div&gt;&lt;div class="devguideorder"&gt;&lt;span&gt;2&lt;/span&gt;为能够正常展示地图和检索结果,打开 pages/index/index.wxml 文件,用下面的代码完全替换原代码&lt;/div&gt;&lt;div class="devguidecenter"&gt;&lt;pre class="prettyprint codestyle"&gt;&lt;view class="map_container"&gt;&nbsp;<br/>&nbsp; &lt;map class="map" id="map" longitude="&#x7B;&#x7B;longitude&#x7D;&#x7D;" latitude="&#x7B;&#x7B;latitude&#x7D;&#x7D;" scale="14" show-location="true" markers="&#x7B;&#x7B;markers&#x7D;&#x7D;" bindmarkertap="makertap"&gt;&lt;/map&gt;&nbsp;<br/>&lt;/view&gt;&nbsp;<br/>&lt;view class="rgc_info"&gt;&nbsp;<br/>&nbsp; &lt;text&gt;&#x7B;&#x7B;rgcData.address&#x7D;&#x7D;&lt;/text&gt;&nbsp;<br/>&nbsp; &lt;text&gt;&#x7B;&#x7B;rgcData.desc&#x7D;&#x7D;&lt;/text&gt;&nbsp;<br/>&nbsp; &lt;text&gt;&#x7B;&#x7B;rgcData.business&#x7D;&#x7D;&lt;/text&gt;&nbsp;<br/>&lt;/view&gt;<br/>&lt;/pre&gt;<br/>&lt;/div&gt;&lt;div class="devguideorder"&gt;&lt;span&gt;3&lt;/span&gt;拷贝样式代码到 pages/index/index.wxss文件&lt;/div&gt;&lt;div class="devguidecenter"&gt;&lt;pre class="prettyprint codestyle"&gt;.map_container{&nbsp;<br/>&nbsp; &nbsp; height: 300px;&nbsp;<br/>&nbsp; &nbsp; width: 100%;&nbsp;<br/>}&nbsp;<br/><br/>.map {&nbsp;<br/>&nbsp; &nbsp; height: 100%;&nbsp;<br/>&nbsp; &nbsp; width: 100%;&nbsp;<br/>}<br/>&lt;/pre&gt;<br/>&lt;/div&gt;&lt;div class="devguideorder"&gt;&lt;span&gt;4&lt;/span&gt;最后保存修改,即可看到示例效果&lt;/div&gt;&lt;div class="devguidecenter"&gt;本示例在页面加载完成后对当前定位点进行了逆地址解析,点击marker可以看到当前地点的相关位置描述信息。<br/>http://mapopen-pub-jsapi.bj.bcebos.com/img/rgc.PNG<br/>&lt;/div&gt;&lt;/div&gt;<br/><!--<br/><br/><br/><br/><br/><br/><br/><br/>= 逆地址解析 =<br/><br/>解析位置坐标,提供从经纬度坐标到地址的转换,展示定位地点的详细地址信息及周边高权重的POI分布数据,很快知道“我在哪”。<br/><br/>逆地址解析服务默认对当前定位后的坐标进行解析,也可以在调用时指定经纬度进行解析。检索返回的结果包含marker数组数据和完整数据两项。marker数组数据符合小程序marker规范,可以直接用于小程序map中;完整数据包含该服务接口返回的所有详尽的数据,方便开发者进行自定义开发。<br/><br/>= 实现方法 =<br/><br/>1、打开快速创建的微信小程序 pages/index/index.js 文件,用下面的代码完全替换原代码。<br/><br/>在以下的代码中,首先引用百度地图微信小程序JavaScript API 模块,然后在页面的onLoad中声明BMapWX对象,最后调用BMapWX.regeocoding方法进行逆地址解析(从经纬度转换为地址信息)。<br/><br/><br/>&lt;span _fck_mw_customtag="true" _fck_mw_tagname="syntaxhighlight" _fck_mw_tagtype="t" lang="null" _fck_mw_tagattributes="lang" class="fck_mw_syntaxhighlight"&gt;fckLRfckLR// 引用百度地图微信小程序JSAPI模块 fckLRvar bmap = require('../../libs/bmap-wx.js'); fckLRvar wxMarkerData = []; fckLRPage({ fckLR&nbsp;&nbsp;&nbsp;&nbsp;data: { fckLR&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;markers: [], fckLR&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;latitude: '', fckLR&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;longitude: '', fckLR&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rgcData: {} fckLR&nbsp;&nbsp;&nbsp;&nbsp;}, fckLR&nbsp;&nbsp;&nbsp;&nbsp;makertap: function(e) { fckLR&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var that = this; fckLR&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var id = e.markerId; fckLR&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;that.showSearchInfo(wxMarkerData, id); fckLR&nbsp;&nbsp;&nbsp;&nbsp;}, fckLR&nbsp;&nbsp;&nbsp;&nbsp;onLoad: function() { fckLR&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var that = this; fckLR&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// 新建百度地图对象 fckLR&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var BMap = new bmap.BMapWX({ fckLR&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ak: '您的ak' fckLR&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); fckLR&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var fail = function(data) { fckLR&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(data) fckLR&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}; fckLR&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var success = function(data) { fckLR&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;wxMarkerData = data.wxMarkerData; fckLR&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;that.setData({ fckLR&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;markers: wxMarkerData fckLR&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); fckLR&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;that.setData({ fckLR&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;latitude: wxMarkerData[0].latitude fckLR&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); fckLR&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;that.setData({ fckLR&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;longitude: wxMarkerData[0].longitude fckLR&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); fckLR&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} fckLR&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// 发起regeocoding检索请求 fckLR&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;BMap.regeocoding({ fckLR&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fail: fail, fckLR&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;success: success, fckLR&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;iconPath: '../../img/marker_red.png', fckLR&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;iconTapPath: '../../img/marker_red.png' fckLR&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); fckLR&nbsp;&nbsp;&nbsp;&nbsp;}, fckLR&nbsp;&nbsp;&nbsp;&nbsp;showSearchInfo: function(data, i) { fckLR&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var that = this; fckLR&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;that.setData({ fckLR&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rgcData: { fckLR&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;address: '地址:' + data[i].address + '\n', fckLR&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;desc: '描述:' + data[i].desc + '\n', fckLR&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;business: '商圈:' + data[i].business fckLR&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} fckLR&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); fckLR&nbsp;&nbsp;&nbsp;&nbsp;} fckLRfckLR}) fckLR fckLR&lt;/span&gt;<br/><br/>2、为能够正常展示地图和检索结果,打开 pages/index/index.wxml 文件,用下面的代码完全替换原代码。<br/><br/><br/>&lt;span _fck_mw_customtag="true" _fck_mw_tagname="syntaxhighlight" _fck_mw_tagtype="t" lang="null" _fck_mw_tagattributes="lang" class="fck_mw_syntaxhighlight"&gt;fckLRfckLR&lt;view class="map_container"&gt; fckLR&nbsp;&nbsp;&lt;map class="map" id="map" longitude="&#x7B;&#x7B;longitude&#x7D;&#x7D;" latitude="&#x7B;&#x7B;latitude&#x7D;&#x7D;" scale="14" show-location="true" markers="&#x7B;&#x7B;markers&#x7D;&#x7D;" bindmarkertap="makertap"&gt;&lt;/map&gt; fckLR&lt;/view&gt; fckLR&lt;view class="rgc_info"&gt; fckLR&nbsp;&nbsp;&lt;text&gt;&#x7B;&#x7B;rgcData.address&#x7D;&#x7D;&lt;/text&gt; fckLR&nbsp;&nbsp;&lt;text&gt;&#x7B;&#x7B;rgcData.desc&#x7D;&#x7D;&lt;/text&gt; fckLR&nbsp;&nbsp;&lt;text&gt;&#x7B;&#x7B;rgcData.business&#x7D;&#x7D;&lt;/text&gt; fckLR&lt;/view&gt; fckLR fckLR&lt;/span&gt;<br/><br/>3、拷贝样式代码到 pages/index/index.wxss文件。<br/><br/><br/>&lt;span _fck_mw_customtag="true" _fck_mw_tagname="syntaxhighlight" _fck_mw_tagtype="t" lang="null" _fck_mw_tagattributes="lang" class="fck_mw_syntaxhighlight"&gt;fckLRfckLR.map_container{ fckLR&nbsp;&nbsp;&nbsp;&nbsp;height: 300px; fckLR&nbsp;&nbsp;&nbsp;&nbsp;width: 100%; fckLR} fckLRfckLR.map { fckLR&nbsp;&nbsp;&nbsp;&nbsp;height: 100%; fckLR&nbsp;&nbsp;&nbsp;&nbsp;width: 100%; fckLR} fckLR fckLR&lt;/span&gt;<br/><br/>4、最后保存修改,即可看到示例效果。本示例在页面加载完成后对当前定位点进行了逆地址解析,点击marker可以看到当前地点的相关位置描述信息。<br/><br/>http://mapopen-pub-jsapi.bj.bcebos.com/img/rgc.PNG<br/><br/><br/><br/><br/>-->
+
{{wxjsapi-sidebar}}<div class="bread-crumbs">您当前位置: [[wxjsapi|微信小程序JS API]] > [[wxjsapi/guide/key|开发指南]] > [[wxjsapi/guide/getpoi|获取地图数据]] > 地址解析</div><div class="h1-title">地址解析</div><div id="update-time1">更新时间:2019年07月03日</div><div class="bluetitle"><div class="serve-explain-text"><div class="service-page-anchor"><span>简介</span></div></div></div><div class="serve-explain-text">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;地址解析,简单来讲就是将结构化地址(省/市/区/街道/门牌号)解析为对应的经纬度坐标。比如将"北京市海淀区上地十街10号"转化为"116.30051,40.0511"。当然,地址结构越完整,地址内容越准确,解析的坐标精度也会越高。<br/><br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;使用该地址解析服务进行检索,返回的结果包含marker数组数据和完整数据两项。marker数组数据符合小程序marker规范,可以直接用于小程序map中;完整数据包含该服务接口返回的所有详尽的数据,方便开发者进行自定义开发。</div><div class="bluetitle"><div class="serve-explain-text"><div class="service-page-anchor"><span>实现方法</span></div></div></div><div class="devguide"><div class="leftborderbg" style="height:5000px;"></div><div class="devguideorder"><span>1</span>
 +
打开快速创建的微信小程序 pages/index/index.js 文件,用下面的代码完全替换原代码
 +
</div><div class="devguidecenter">
 +
在以下的代码中,首先引用百度地图微信小程序JavaScript API 模块,然后在页面的onLoad中声明BMapWX对象,最后调用BMapWX.geocoding方法进行地址解析(将地址信息转换为经纬度)。
 +
<pre class="prettyprint codestyle" style="overflow-y: auto;">// 引用百度地图微信小程序JSAPI模块&nbsp;
 +
var bmap = require('../../libs/bmap-wx.min.js');&nbsp;
 +
var wxMarkerData = [];&nbsp;
 +
Page({&nbsp;
 +
&nbsp; &nbsp; data: {&nbsp;
 +
&nbsp; &nbsp; &nbsp; &nbsp; markers: [],&nbsp;
 +
&nbsp; &nbsp; &nbsp; &nbsp; latitude: ,&nbsp;
 +
&nbsp; &nbsp; &nbsp; &nbsp; longitude: ,&nbsp;
 +
&nbsp; &nbsp; &nbsp; &nbsp; rgcData: {}&nbsp;
 +
&nbsp; &nbsp; },&nbsp;
 +
&nbsp; &nbsp; onLoad: function() {&nbsp;
 +
&nbsp; &nbsp; &nbsp; &nbsp; var that = this;&nbsp;
 +
&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;// 新建百度地图对象&nbsp;
 +
&nbsp; &nbsp; &nbsp; &nbsp; var BMap = new bmap.BMapWX({&nbsp;
 +
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ak: '您的ak'&nbsp;
 +
&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp;
 +
&nbsp; &nbsp; &nbsp; &nbsp; var fail = function(data) {&nbsp;
 +
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(data)&nbsp;
 +
&nbsp; &nbsp; &nbsp; &nbsp; };&nbsp;
 +
&nbsp; &nbsp; &nbsp; &nbsp; var success = function(data) {&nbsp;
 +
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; wxMarkerData = data.wxMarkerData;&nbsp;
 +
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; that.setData({&nbsp;
 +
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; markers: wxMarkerData&nbsp;
 +
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp;
 +
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; that.setData({&nbsp;
 +
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; latitude: wxMarkerData[0].latitude&nbsp;
 +
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp;
 +
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; that.setData({&nbsp;
 +
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; longitude: wxMarkerData[0].longitude&nbsp;
 +
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp;
 +
&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp;
 +
&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;// 发起geocoding检索请求&nbsp;
 +
&nbsp; &nbsp; &nbsp; &nbsp; BMap.geocoding({&nbsp;
 +
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; address: "北京市海淀区上地十街10号",&nbsp;
 +
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fail: fail,&nbsp;
 +
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; success: success,&nbsp;
 +
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; iconPath: '../../img/marker_red.png',&nbsp;
 +
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; iconTapPath: '../../img/marker_red.png'&nbsp;
 +
&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp;
 +
&nbsp; &nbsp; },&nbsp;
 +
})
 +
</pre>
 +
</div><div class="devguideorder"><span>2</span>
 +
为能够正常展示地图和检索结果,打开 pages/index/index.wxml 文件,用下面的代码完全替换原代码
 +
</div><div class="devguidecenter"><pre class="prettyprint codestyle" style="overflow-y: auto;"><view class="map_container">&nbsp;
 +
&nbsp; <map class="map" id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" show-location="true" markers="{{markers}}" bindmarkertap="makertap"></map>&nbsp;
 +
</view>&nbsp;
 +
<view class="rgc_info">&nbsp;
 +
&nbsp; <text>经度:{{longitude}}</text>&nbsp;
 +
&nbsp; <text>纬度:{{latitude}}</text>&nbsp;
 +
</view>
 +
</pre>
 +
</div><div class="devguideorder"><span>3</span>拷贝样式代码到 pages/index/index.wxss文件</div><div class="devguidecenter"><pre class="prettyprint codestyle" style="overflow-y: auto;">.map_container{&nbsp;
 +
&nbsp; &nbsp; height: 420px;&nbsp;
 +
&nbsp; &nbsp; width: 100%;&nbsp;
 +
}&nbsp;
 +
 
 +
.map {&nbsp;
 +
&nbsp; &nbsp; height: 100%;&nbsp;
 +
&nbsp; &nbsp; width: 100%;&nbsp;
 +
}
 +
   
 +
.rgc_info {
 +
&nbsp; &nbsp; padding: 5px;
 +
}
 +
.rgc_info {
 +
&nbsp; &nbsp; display: block;
 +
}
 +
</pre>
 +
</div><div class="devguideorder"><span>4</span>最后保存修改,即可看到示例效果</div><div class="devguidecenter">本示例在页面加载完成后对当前定位点进行了地址解析,点击marker可以看到当前地点的相关位置描述信息。https://mapopen-website-wiki.cdn.bcebos.com/wechat-api/geo_coding.png</div></div>

2023年5月4日 (四) 10:50的最后版本

地址解析
更新时间: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可以看到当前地点的相关位置描述信息。geo_coding.png
  • 文档根本没法用

  • 文档水平很差

  • 文档水平一般

  • 文档不错

  • 文档写的很好

如发现文档错误,或对此文档有更好的建议,请在下方反馈。问题咨询请前往反馈平台提交工单咨询。

提交反馈

拖动标注工具

添加矩形标注

添加箭头标注

完成

取消