1、微信小程序地图展示位置信息
获取用户的位置信息,最开始使用了微信小程序提供的getlocation来获取用户的定位,能够得到用户的经纬度信息,(注:getloaction需要用户授权scope.userLocation)结合map组件能够得到用户的详细定位,代码如下:
<map id="map" longitude="{{location.longitude}}" latitude="{{location.latitude}}" scale="14" bindcontroltap="controltap" bindmarkertap="markertap" polyline="{{polyline}}" bindregionchange="regionchange" show-location style="width: 100%; height: 100vh;"></map>
<button class='login' bindtap='loginView'>登录/注册</button>
onLoad: function () {
wx.getLocation({
success: res=> {
console.log(res);
this.setData({
location: res,
})
// console.log(app.globalData.location);
},
})
}
实现效果如下图:
微信小程序也支持在地图上选点,获取定位信息(wx.chooseLocation)和使用微信内置地图查看位置(wx.openLocation)
2、结合百度地图获取位置信息
微信小程序的接口,只能得到经纬度,但有时候我们需要得到具体的城市或者区域信息,这就需要借助百度地图了。
- 第一步:先到百度开放平台http://lbsyun.baidu.com申请ak(链接地址为:http://lbsyun.baidu.com/index.php?title=wxjsapi/guide/key)
- 第二步:在服务器配置中添加百度地图的服务器(https://api.baidu.com)
- 第三步:下载百度地图的api ,链接:http://download.csdn.net/detail/michael_ouyang/9754015
- 第四步:引入JS模块,将下载的js放到工程目录下
- 第五步:在所需的js文件内导入js
var bmap = require('../../libs/bmap-wx/bmap-wx.js');
- 第六步:编辑代码 ,此处我获得的是城市信息,可以log出信息,选择自己要显示的信息,用setData的方式放入数据中进行展示即可
var BMap = new bmap.BMapWX({
ak: that.data.ak,
});
console.log(BMap)
var fail = function(data) {
console.log(data);
};
var success = function(data) {
//返回数据内,已经包含经纬度
console.log(data);
//使用wxMarkerData获取数据
// = data.wxMarkerData;
wxMarkerData=data.originalData.result.addressComponent.city
//把所有数据放在初始化data内
console.log(wxMarkerData)
that.setData({
// markers: wxMarkerData,
// latitude: wxMarkerData[0].latitude,
// longitude: wxMarkerData[0].longitude,
address: wxMarkerData
});
}
// 发起regeocoding检索请求
BMap.regeocoding({
fail: fail,
success: success
});
},
|
请发表评论