小程序-地图（1）

小程序地图组件的使用
主要是两个文件
maps.js
maps.wxml
在app.js中添加上地图文件的路径
1获取当前位置

屏幕快照 2018-05-27 下午10.04.50.png

maps.wxml代码

<map id="map" longitude="{{longitude}}" latitude="{{latitude}}" 
scale="14"  markers="{{markers}}" bindmarkertap="markertap"  
show-location style="width: 100%; height: 300px;"></map>

maps.js代码
wx.getLocation(OBJECT)
获取当前的地理位置、速度。当用户离开小程序后，此接口无法调用；当用户点击“显示在聊天顶部”时，此接口可继续调用。
将wx.getLocation放在onload方法中，

屏幕快照 2018-05-27 下午10.16.10.png

这里marker标记点有个点击事件bindmarkertap（点击标记点时触发 ），

  markertap:function(e){
   console.log(e.markerId,'2')
}

2视野发生改变触发事件
bindregionchange：视野发生变化时触发
maps.wxml代码

<map id="map" longitude="{{longitude}}" latitude="{{latitude}}" 
scale="14" controls="{{controls}}"  markers="{{markers}}" 
bindmarkertap="markertap"bindregionchange="regionchange" 
show-location style="width: 100%; height: 300px;"></map>

maps.js代码

 regionchange:function(e){
console.log(e.type,'1',e)
}

3点击控件时触发
bindcontroltap：点击控件时触发
maps.wxml代码

<map id="map" longitude="{{longitude}}" latitude="{{latitude}}" 
scale="14" controls="{{controls}}" bindcontroltap="controltap" 
markers="{{markers}}" bindmarkertap="markertap" 
bindregionchange="regionchange" show-location style="width: 
100%; height: 300px;"></map>

maps.js代码
需要一个事件方法和一个控件

    controltap:function(e){
    console.log(e.controlId,'3',e)
    },

控件参数要放到data中，在地图上显示控件，控件不随着地图移动。

controls: [{
      id: 1,
      iconPath: '../assests/imgs/location.png',
      position: {
        left: 0,
        top: 300 - 50,
        width: 50,
        height: 50
      },
      clickable: true
    }]

具体更多信息请查看微信小程序官方文档