1.

小程序运行于微信，类似于h5页面，使用微信开发者工具建立小程序工程，json文件储存相关的配置，wxml文件类似于html文件，wxss类似于css文件，js文件编写逻辑。这个demo展示了小程序的地图控件、地图标记、定位、扫码、导航等。效果：app.js前边部分是生成的，在onLaunch中获取屏幕尺寸相关的信息，储存在globalData中。

//app.jsApp({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发送给后台解码出unionIdconsole.log(this.globalData)//由于getUserInfo是网络请求，可能会在Page.onLoad之后才返回//所以此处加入callback以防止这种情况if(this.userInfoReadyCallback){this.userInfoReadyCallback(res)}}})}}})varthatthis//获取屏幕尺寸，放到全局结构中wx.getSystemInfo({success:function(res){that.globalData.scHeightres.windowHeightthat.globalData.scWidthres.windowWidth},})console.log(this.globalData.scWidth)console.log(this.globalData.scHeight)},globalData:{userInfo:null,scWidth:0,//全局的屏幕尺寸，已经去掉了上边的标题栏scHeight:0}})2.

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

!--index.wxml--mapid"myMap"style"width:100vw;height:100vh"latitude"{{latitude}}"longitude"{{longitude}}"controls"{{mapControls}}"markers"{{markers}}"bindcontroltap"mapControlTap"bindregionchange"regionChanged"bindtap"mapTap"bindmarkertap"mapMarker"show-location/map3.

index.js地图控件的逻辑部分，控件定位使用了appglobalData中储存的屏幕尺寸，然后计算相对尺寸，保证在各种分辨率屏幕中的正常显示。地图控件被点击的回调函数mapControlTap参数中的id与mapControls中的id一一对应，确定点击的按钮集处理。地图标记是regionChanged回调时添加的，详细的看下文档加上去。扫码和导航就直接调api了。

//index.js//获取应用实例constappgetApp()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.myMapCtxwx.createMapContext("myMap",this)this.getLocation()},regionChanged:function(e){//地图视野改变if(e.type"end"){varthatthisthis.myMapCtx.getCenterLocation({//获取中心点的经纬度success:function(res){varmarkthat.data.markersvaridthat.data.markers.lengthvarwidthapp.globalData.scWidth*0.1mark.push({//放到标记里边longitude:res.longitude,//经纬度latitude:res.latitude,iconPath:"/image/marker.png",//图标,相对于小程序根目录的路径id:id,width:width,height:width,title:"whatisthis?",callout:{//气泡content:"whatisthis?",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){case0://定位this.getLocation()break;case2://扫码this.scanCode()break;case3://我的this.navigateToPersonal()break;}},mapTap:function(e){//地图点击//console.log(e)},mapMarker:function(e){console.log("点击了标记："+e.markerId)}})4.

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