微信小程序原生map-地图定位
一、新建wxml文件-基础布局；（注意最好map标签外层再嵌套一层view） //eg:maplist.wxml
//eg: maplist.js Page({
data: {
latitude: '0', //首次加载维度
longitude: '0', //首次加载的经度
scale:16,
mapName: "", //选点的位置
key:'地图key',//地图key
address:'',//任务地址
authentication:'认证'
},
初始化经纬度为0时会加载不出来地图，页面会显示空白；为了预览一下地图效果咱们先打开百度搜索"腾讯地图API"; [图片] 打开服务端api; [图片] [图片] 拿到经度和纬度后先静态复制给小程序map的经纬度；这样在咱们就可以看到自己输入的位置了； [图片] 二、添加放大缩小按钮
+
-
wxss样式编写 /* pages/user/mapList/mapList.wxss */
map{
position: relative;
}
.telescoping-box{
width: 60rpx;
height: 120rpx;
text-align: center;
background-color: #fff;
-moz-box-shadow:2rpx 2rpx 20rpx #999;
-webkit-box-shadow:2rpx 2rpx 20rpx #999;
box-shadow:2rpx 2rpx 20rpx #999;
position: absolute;
left: 30rpx;
bottom: 120rpx;
border-radius: 10rpx;
}
.telescoping-box view{
margin-top: 10rpx;
font-size: 35rpx;
color: #999;
}
添加点击事件 //按钮放大地图
scaleAdd(){
let scale = this.data.scale;
if(this.data.scale>=20){
this.setData({
scale:20
})
}else{
scale++;
this.setData({
scale:scale
})
}
},
//按钮缩小地图
scaleReduce(){
let scale = this.data.scale;
if(this.data.scale<=3){
this.setData({
scale:3
})
}else{
scale--;
this.setData({
scale:scale
})
}
},
scale缩放范围为：3-20 [图片] 三、点击标点按钮返回到当前位置
+-
wxss样式编写 .cover-view{
width: 60rpx;
height: 60rpx;
position: absolute;
right: 40rpx;
bottom: 60rpx;
}
添返回位置点击事件 controltap(e) {
// 创建 map 上下文 MapContext 对象。建议使用 wx.createSelectorQuery 获取 context 对象
// 获取地图，map要与wxml页面的id名一致。注意：不需要#符号
let mpCtx = wx.createMapContext('myMap')
// 将地图中心移置当前定位点，此时需设置地图组件 show-location 为true。'2.8.0' 起支持将地图中心移动到指定位置。
mpCtx.moveToLocation();
// 将地图缩放值改为初始值
this.setData({
scale: 16
})
},
regionChange(e) {
// 获取地图
let mpCtx = wx.createMapContext('myMap')
let that = this;
// 判断是缩放，打印一下e，就能看到缩放值。注意：需真机测试
if (e.type == "end" && e.causedBy == "scale") {
// 如果是缩放，获取房钱缩放值，并修改data中的scale属性（此处很关键）
mpCtx.getScale({
success: function(res){
if (res.scale != this.data.scale) {
// 如果缩放了 = 现在的缩放值和初始值不一样时，修改data中的scale值
that.setData({
scale: res.scale
})
}
}
})
}
},
[图片] 四、定位功能 申请腾讯接口key，注册登录后先点击控制台，其次点击应用管理，到我的应用菜单。如下图: [图片] [图片] 这步操作主要是调腾讯接口api逆地址解析，获取到经度和纬度后解析为坐标位置描述； [图片] [图片] /逆地址解析
getattrChange(){
let that = this;
console.log(that.data.latitude);
console.log(that.data.longitude);
wx.request({
url: 'https://apis.map.qq.com/ws/geocoder/v1/?location='+that.data.latitude+','+that.data.longitude+'&key='+that.data.key+'&get_poi=1',
header: {
'content-type': 'application/json' // 默认值
},
success (res) {
console.log(res.data.result)
if(res.data.result.formatted_addresses.recommend){
that.setData({
address:res.data.result.formatted_addresses.recommend
})
}else{
that.setData({
address:res.data.result.address
})
}
}
})
},
重点来了，那咱们如何知道当前位置的经度和纬度呢？[图片] 1.申请wx.getLocation接口，这个接口精准度是最高的； [图片] 但这个接口不容易审核通过[图片]，审核了十几次没通过我放弃了。。。 2.申请wx.getFuzzyLocation； 申请了一下wx.getFuzzyLocation模糊地理位置查询接口很顺利的审核通过，但误差不是一般的大[图片]，也就放弃了； [图片] 3.百度地图api里面找找？[图片] [图片] 4.在高德地图api里面找找？[图片] 果然找到了，MMP[图片] [图片] 创建应用---生成秘钥key，生产环境建议用企业开发者申请； [图片] [图片] [图片] var amapFile = require('./amap-wx.130');//如：../../libs/amap-wx.js
Page({
data: {
longitude: '116.321175', //首次加载的经度
latitude: '39.993446', //首次加载维度
scale:16,
}
onLoad: function (options) {
let that = this;
//that.requestLocation();
var myAmapFun = new amapFile.AMapWX({key:this.data.gaokey});
myAmapFun.getRegeo({
success: function(data){
//成功回调
console.log(data)
that.setData({
latitude: data[0].latitude,
longitude: data[0].longitude,
})
that.getattrChange();
},
fail: function(info){
//失败回调
console.log(info)
}
})
},
})
//app.json
"requiredPrivateInfos":[
"getLocation"
],
"permission": {
"scope.userLocation": {
"desc": "您的位置信息仅在小程序位置展示"
},
"scope.userFuzzyLocation": {
"desc": "您的位置信息仅在小程序位置展示"
}
},
完美解决！[图片]
