微信小程序入门3--获取城市定位信息
本帖最后由 湖畔科技 于 2020-2-22 20:20 编辑借助百度地图完成获取城市定位信息，首先要获取服务密钥(ak)，然后解析位置坐标。想要获取ak，则需要注册百度账号、申请成为百度开发者，在上一节微信小程序入门2中有详细说明。
打开自己新建的pages/demo/demo.js 文件，用下面的代码完全替换原代码。在以下代码中需要引用百度地图微信小程序JavaScript API 模块,具体的下载方法在上一节微信小程序入门2中有详细说明。// 引用百度地图微信小程序JSAPI模块
var bmap = require('../../libs/bmap-wx.min.js');
var wxMarkerData = [];
Page({
data: {
markers: [],
latitude: '',
longitude: '',
rgcData: {}
},
makertap: function (e) {
var that = this;
var id = e.markerId;
that.showSearchInfo(wxMarkerData, id);
},
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.latitude
});
that.setData({
longitude: wxMarkerData.longitude
});
}
// 发起regeocoding检索请求
BMap.regeocoding({
fail: fail,
success: success,
iconPath: '../../img/marker_red.png',
iconTapPath: '../../img/marker_red.png'
});
},
showSearchInfo: function (data, i) {
var that = this;
that.setData({
rgcData: {
address: '地址：' + data.address + '\n',
desc: '描述：' + data.desc + '\n',
business: '商圈：' + data.business
}
});
}
})
打开 pages/demo/demo.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>{{rgcData.address}}</text>
<text>{{rgcData.desc}}</text>
<text>{{rgcData.business}}</text>
</view>
将以下代码复制到pages/demo/demo.wxss文件中。.map_container{
height: 300px;
width: 100%;
}
.map {
height: 100%;
width: 100%;
}
最后保存修改，点击marker可以看到当前地点的相关位置描述信息。 若出现报错，点击地图的圆点依旧能显示位置信息。
这个错误是因为在我们的项目中没有这些图片，可以将这两句屏蔽或替换自己的图片。
页:
[1]