(未显示1个用户的20个中间版本) | |||
第1行: | 第1行: | ||
− | {{wxjsapi-sidebar}}<div class="h1-title">地址解析</div><div id="update- | + | {{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"> 地址解析,简单来讲就是将结构化地址(省/市/区/街道/门牌号)解析为对应的经纬度坐标。比如将"北京市海淀区上地十街10号"转化为"116.30051,40.0511"。当然,地址结构越完整,地址内容越准确,解析的坐标精度也会越高。<br/><br/> 使用该地址解析服务进行检索,返回的结果包含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"> | |
− | </div><div class="bluetitle"><div class=" | + | 在以下的代码中,首先引用百度地图微信小程序JavaScript API 模块,然后在页面的onLoad中声明BMapWX对象,最后调用BMapWX.geocoding方法进行地址解析(将地址信息转换为经纬度)。 |
− | 在以下的代码中,首先引用百度地图微信小程序JavaScript API 模块,然后在页面的onLoad中声明BMapWX对象,最后调用BMapWX. | + | <pre class="prettyprint codestyle" style="overflow-y: auto;">// 引用百度地图微信小程序JSAPI模块 |
− | <pre class="prettyprint codestyle">// | + | var bmap = require('../../libs/bmap-wx.min.js'); |
− | var bmap = require('../../libs/bmap-wx.js'); | + | var wxMarkerData = []; |
− | var wxMarkerData = []; | + | Page({ |
− | 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' | |
− | + | }); | |
− | + | }, | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
}) | }) | ||
</pre> | </pre> | ||
− | </div><div class="devguideorder"><span>2</span>为能够正常展示地图和检索结果,打开 pages/index/index.wxml 文件,用下面的代码完全替换原代码</div><div class="devguidecenter"><pre class="prettyprint codestyle"><view class="map_container"> | + | </div><div class="devguideorder"><span>2</span> |
− | + | 为能够正常展示地图和检索结果,打开 pages/index/index.wxml 文件,用下面的代码完全替换原代码 | |
− | </view> | + | </div><div class="devguidecenter"><pre class="prettyprint codestyle" style="overflow-y: auto;"><view class="map_container"> |
− | <view class="rgc_info"> | + | <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> | </view> | ||
</pre> | </pre> | ||
− | </div><div class="devguideorder"><span>3</span>拷贝样式代码到 pages/index/index.wxss文件</div><div class="devguidecenter"><pre class="prettyprint codestyle">.map_container{ | + | </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{ |
− | + | height: 420px; | |
− | + | width: 100%; | |
− | } | + | } |
− | + | ||
− | .map { | + | .map { |
− | + | height: 100%; | |
− | + | width: 100%; | |
+ | } | ||
+ | |||
+ | .rgc_info { | ||
+ | padding: 5px; | ||
+ | } | ||
+ | .rgc_info { | ||
+ | display: block; | ||
} | } | ||
</pre> | </pre> | ||
− | </div><div class="devguideorder"><span>4</span>最后保存修改,即可看到示例效果</div><div class="devguidecenter"> | + | </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> |
− | + | ||
− | </div></div> | + |
2023年5月4日 (四) 10:50的最后版本
地址解析
更新时间:2019年07月03日
简介
地址解析,简单来讲就是将结构化地址(省/市/区/街道/门牌号)解析为对应的经纬度坐标。比如将"北京市海淀区上地十街10号"转化为"116.30051,40.0511"。当然,地址结构越完整,地址内容越准确,解析的坐标精度也会越高。
使用该地址解析服务进行检索,返回的结果包含marker数组数据和完整数据两项。marker数组数据符合小程序marker规范,可以直接用于小程序map中;完整数据包含该服务接口返回的所有详尽的数据,方便开发者进行自定义开发。
使用该地址解析服务进行检索,返回的结果包含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可以看到当前地点的相关位置描述信息。