微信小程序map地图组件

微信小程序map地图组件

map地图组件直接调用微信小程序提供的地图组件，把地图展示到页面中。微信小程序也很贴心地为地图组件提供了一整套的属性，来完成大头针、路线绘制、导航、地址查询等功能。这里使用的是腾讯地图。map地图组件示例如下：

<!--index.wxml-->
<map id='map' longitude="113.324520" latitude="23.099994" scale='18'></map>
/**index.wxss**/
#map{
  width: 100%;
  height: 200px;
}

效果如图所示：

map组件的属性很多，而且有些属性又有其子属性，所以我们先介绍map的子属性，然后再分别介绍其子属性的属性，一些将要废弃的属性不再介绍。

map组件的子属性如表所示：

注意
（1）设置scale缩放级别只影响了第一次加载显示的级别，还可以再次进行地图放大缩小显示。
（2）show-location的设置要在真机上才能看出效果，在模拟器上看不出效果。

markers：标记点，在地图组件上添加标记，传递的是一个数组，数组里面的每个元素都是一个对象。markers属性的子属性如表所示

markers中的callout和label又有其子属性。callout的子属性见表A。label的子属性见表B。
表A markers属性的callout的子属性

表B markers属性的label的子属性

polyline是在map地图上画一条自定义的线条，这个线条也是由多个定位点组成的，属性如表所示：

polygon是在map地图上画一个闭合的多边形，这个闭合的多边形是由多个定位点组成的，属性如表所示：

circle是在map地图上画一个圆，这个圆只需要知道圆心和半径大小即可，属性如表所示：

在地图组件中也可以获取地图的上下文“wx.createMapContext(string mapId, Object this)”，然后调取API来获取地图的一些信息。

• MapContext.getCenterLocation()：获取地图中心的经纬度，使用gcj02坐标系。
• MapContext.moveToLocation()：将地图中心移动到当前定位点。
• MapContext.translateMarker()：平移marker，带动画。
• MapContext.includePoints()：缩放视野展示所有经纬度。
• MapContext.getRegion()：获取当前地图的视野范围。
• MapContext.getScale()：获取当前地图的缩放级别。

酷客网相关文章：

• 微信小程序switch开关组件
• 微信小程序slider滑动选择器组件
• 微信小程序progress进度条组件
• 微信小程序swiper轮播容器