微信小程序开发之地图功能实战教程
微信小程序之地图功能（map）实战教程。本文主要介绍微信小程序中的地图模块相关功能。
基本使用
地图组件使用起来也很简单。
.wxml
<map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" controls="{{controls}}" bindcontroltap="controltap" markers="{{markers}}" bindmarkertap="markertap" polyline="{{polyline}}" circles="{{circles}}" bindregionchange="regionchange" show-location >
</map>
除了显示基本地图，还可以在地图上添加markers–标注，polyline–折线，circles–圆形，controls–控件。
markers
data: {
//
markers: [{
iconPath: "../../img/marker_red.png",
id: 0,
latitude: 40.002607,
longitude: 116.487847,
width: 35,
height: 45
}],
... //省略代码
}
在data中定义markers变量来表示覆盖物
然后map控件引入即可：
<map id="map" longitude="{{longitude}}" markers="{{markers}}" ...//省略代码>
</map>
polyline
data: {
//
polyline: [{
points: [{
longitude: '116.481451',
latitude: '40.006822'
}, {
longitude: '116.487847',
latitude: '40.002607'
}, {
longitude: '116.496507',
latitude: '40.006103'
}],
color: "#FF0000DD",
width: 3,
dottedLine: true
}],
... //省略代码
}
<map id="map" longitude="{{longitude}}" latitude="{{latitude}}" polyline="{{polyline}}" >
circles
data: {
//
circles: [{
latitude: '40.007153',
longitude: '116.491081',
color: '#FF0000DD',
fillColor: '#7cb5ec88',
radius: 400,
strokeWidth: 2
}],
... //省略代码
}
上一篇
小程序开发之获取用户信息实现方法
下一篇
代码实现简单的生成随机验证码小程序
论坛资讯同步说明，本文同步自论坛：bbs.miaozhizuo.com，如您在论坛注册成为会员用户并且发帖，则默认论坛文章同步协议，协议内容请移步论坛查看！
