微信小程序初识---地图开发

微信小程序似乎比较火，很多公司除了自家app外都要给自家再弄个小程序，于是乎空余时间就试了试小程序，现记录下地图页面的开发。小程序官方文档也比较全，基本上面的东西都有，有前端开发经验的上手更简单。先上图

                   ：

  1.层级结构: 小程序类似于app,以页面为单位，每个页面包含4个文件:  .js  .json  .wxml  .wxss 为后缀的文件，官方文档很清楚

  .wxml 文件:

  // 创建地图

< map id= 'anyoMap' class= 'mp_map' longitude= "{{lon}}" latitude= "{{lan}}" scale= '13' markers= '{{markers}}' controls= '{{controls}}' bindcontroltap= 'controltap' bindmarkertap= 'markerTap' show-location= "true" bindregionchange= 'regionChange' bindupdated= 'mapUpdate' bindtap= 'clickMap' style= "width: 100%; height: {{height}}px;">

//  创建底部按钮

< cover-view class= 'scanCode' bindtap= 'scanCode' animation= "{{scanAnimationData}}">

< cover-view class= 'scanCodeText'>扫码解锁 </ cover-view >

</ cover-view >

// 创建覆盖遮罩详情

< cover-view wx:if= "{{isShowStationInfo}}" class= 'stationInfo' animation = "{{animationData}}" bindtap= 'stationDetailInfo'>

// 添加自定义的遮罩代码 ....

</ cover-view >

注意: map为微信app的原生控件，层级最高，要在其上面添加视图必须添加在 cover-view 上，否则会被map组件覆盖，若直接添加在map上，模拟器上可见，真机上不可见

.js 文件:      事件的监听，地图事件的监听，逻辑事件的处理

// 获取用户当前位置

getUserLocation: function () {

var that = this;

var header = common.getHeader()

wx.getLocation({

type: 'wgs84',

success: function (res) {

// 获取经纬度 定位到当前位置

that.setData({

lan: res.latitude,

lon: res.longitude,

})

}

})

},

// 移动地图到当前位置

moveToLocation: function () {

this.mapCtx = wx.createMapContext( 'anyoMap')

this.mapCtx.moveToLocation()

},

// 使用腾讯地图导航

stationInfoNav: function(){

var latitude = parseFloat(selectedStationModel.latitude)

var longitude = parseFloat(selectedStationModel.longitude)

wx.openLocation({

latitude: latitude,

longitude: longitude,

name:selectedStationModel.name,

address:selectedStationModel.address,

scale: 15

})

},

/****   地图事件监听   *****/

// 地图点击事件

clickMap: function () {

// ...

},

//   区域变化事件 

regionChange: function () {

}

//  大头针点击事件

markerTap: function (e) {

 }

注：有的功能在模拟器上很流畅，到真机上样式就变了，尤其是对于动画的创建执行的时候，机型的兼容性还是有些问题，待后续调试