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

小程序运行于微信，类似于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