微信小程序地图控件、定位、扫码和导航

小程序运行于微信，类似于h5页面，使用微信开发者工具建立小程序工程，json文件储存相关的配置，wxml文件类似于html文件，wxss类似于css文件，js文件编写逻辑。

这个demo展示了小程序的地图控件、地图标记、定位、扫码、导航等。

效果：



app.js

前边部分是生成的，在onLaunch中获取屏幕尺寸相关的信息，储存在globalData中。

//app.js
App({
onLaunch: function () {
// 登录
wx.login({
success: res => {
// 发送 res.code 到后台换取 openId, sessionKey, unionId
}
})
// 获取用户信息
wx.getSetting({
success: res => {
if (res.authSetting['scope.userInfo']) {
// 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
wx.getUserInfo({
success: res => {
// 可以将 res 发送给后台解码出 unionId
console.log(this.globalData)
// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
if (this.userInfoReadyCallback) {
this.userInfoReadyCallback(res)
}
}
})
}
}
})
var that = this
//获取屏幕尺寸，放到全局结构中
wx.getSystemInfo({
success: function (res) {
that.globalData.scHeight = res.windowHeight
that.globalData.scWidth = res.windowWidth
},
})
console.log(this.globalData.scWidth)
console.log(this.globalData.scHeight)
},
globalData: {
userInfo: null,
scWidth: 0,            //全局的屏幕尺寸，已经去掉了上边的标题栏
scHeight: 0
}
})

index.wxml

地图控件，可以参照小程序文档设置地图控件的属性，设置了控件上的按钮、经纬度、点击、标记等回调函数。show-location属性是必须的，不然他不显示当前定位。

<!--index.wxml-->

<map
id="myMap"
style="width:100vw;height:100vh"
latitude="{{latitude}}"
longitude="{{longitude}}"
controls="{{mapControls}}"
markers="{{markers}}"
bindcontroltap="mapControlTap"
bindregionchange="regionChanged"
bindtap="mapTap"
bindmarkertap="mapMarker"
show-location
>
</map>

index.js

地图控件的逻辑部分，控件定位使用了app globalData中储存的屏幕尺寸，然后计算相对尺寸，保证在各种分辨率屏幕中的正常显示。

地图控件被点击的回调函数mapControlTap参数中的id与mapControls中的id一一对应，确定点击的按钮集处理。

地图标记是regionChanged回调时添加的，详细的看下文档加上去。

扫码和导航就直接调api了。

//index.js
//获取应用实例
const app = getApp()

Page
(
{
data:
{
latitude: 23,  //经纬度
longitude: 113,
markers:[],
mapControls:    //地图控件
[
{ //定位
id: 0,
position: {                //相对定位
left: app.globalData.scWidth * 0.03,
top: app.globalData.scHeight * 0.9,
width: app.globalData.scWidth * 0.1
},
iconPath: "../../image/locat.png",          //相对于当前文件的路径
clickable: true
},
{ //扫码
id: 2,
position: {                //相对定位
left: app.globalData.scWidth * 0.33,
top: app.globalData.scHeight * 0.85,
width: app.globalData.scWidth * 0.4,
height: app.globalData.scWidth * 0.2
},
iconPath: "../../image/scan.png",
clickable: true
},
{ //我的
id: 3,
position: {                //相对定位
left: app.globalData.scWidth * 0.87,
top: app.globalData.scHeight * 0.9,
width: app.globalData.scWidth * 0.1
},
iconPath: "../../image/my.png",
clickable: true
},
{  //地图中心
id: 14,
position: {                //相对定位
left: app.globalData.scWidth * 0.47,
top: app.globalData.scHeight * 0.42,
width: app.globalData.scHeight * 0.04
},
iconPath: "../../image/center.png",
clickable: false
}
]
},
getLocation: function (){      //获取当前位置，并移动地图到当前位置
this.myMapCtx.moveToLocation()
},
onLoad: function () {          //加载
this.myMapCtx = wx.createMapContext("myMap", this)
this.getLocation()
},
regionChanged: function (e) {                            //地图视野改变
if (e.type == "end") {
var that = this
this.myMapCtx.getCenterLocation({              //获取中心点的经纬度
success: function (res) {
var mark = that.data.markers
var id = that.data.markers.length
var width = app.globalData.scWidth * 0.1
mark.push({        //放到标记里边
longitude: res.longitude,          //经纬度
latitude: res.latitude,
iconPath: "/image/marker.png",      //图标,相对于小程序根目录的路径
id: id,
width: width,
height: width,
title: "what is this?",
callout: {                          //气泡
content: "what is this?",
color: "lightgray",
fontSize: 15,
borderRadius: 5,
bgColor: "white",
display: "ALWAYS",              //显示模式
padding: 5,
textAlign: "center"
},
label: {                            //标记下表的文本标签
content: "位置标记",
color: "lightgray",
textAlign: "center",
fontSize: 15
}
})
that.setData({                  //必须使用setData设置，不然会出现数据跟新了，但是地图视图不跟新的情况
"markers": mark
})
}
})
}
},
scanCode:function(){                    //扫描二维码
wx.scanCode({
success(res){                  //扫码成功
wx.showModal({              //扫码结果
title: "扫码结果",
content: res.result,
})
}
})
},
navigateToPersonal:function(){
wx.navigateTo({
url: "/pages/personal/personal"
})
},
mapControlTap: function (e) {          //地图控件点击
switch (e.controlId) {
case 0://定位
this.getLocation()
break;
case 2://扫码
this.scanCode()
break;
case 3://我的
this.navigateToPersonal()
break;
}
},
mapTap: function(e){            //地图点击
//console.log(e)
},
mapMarker:function(e){
console.log("点击了标记：" + e.markerId)
}
}
)

代码：https://github.com/yangyang0312/wxapp/tree/master/mapDemo