小程序地图控件基本使用

.wxml


参数名 参数类型 描述
longitude Number 中心经度
latitude Number 中心纬度
scale Number 缩放级别,取值范围 5-18(默认16 number)
markers Array 标记点
polyline Array 路线
circle Array
controls Array 控件
include-points Array 缩放视野以及所有给定的坐标点
circle Boolean
show-location EventHandle 显示带有方向的当前定位点
bindmarkertap EventHandle 点击标记点时触发
bindcontroltap EventHandle 点击控件时触发
bindregionchange EventHandle 视野发生变化时触发
bindtap EventHandle 点击地图时触发

除了显示基本地图,还可以在地图上添加markers–标注,polyline–折线,circles–圆形,controls–控件。

markers
data: {
    markers: [{
      iconPath: "../../img/marker_red.png",
      id: 0,
      latitude: 40.002607,
      longitude: 116.487847,
      callout:{
        content:'气泡名称',
        color: '#FF0000',
        fontSize: 15,
        borderRadius: 10,
        display: 'ALWAYS',
      },
      width: 35,
      height: 45
    }],
    ... //省略代码
    }
参数名 参数类型 必传 描述
id Number N 标记点id(marker事件回调会返回此id)
longitude Number Y 中心经度(浮点数,范围:-180~180)
latitude Number Y 中心纬度(浮点数,范围:-90~90)
title String N 标注点名
iconPath String Y 显示的图标(项目目录下的图片路径,支持相对路径写法,以‘/’开头,则表示相对小程序的根目录,也支持临时路径)
rotate Number N 旋转角度(顺时针旋转的角度,范围:0~360,默认0)
alpha Number N 标注的透明度(默认1,无透明)
width Number N 标注图标宽度(默认图标实际宽度)
height Number N 标注图标高度(默认图标实际高度)
callout Object N 自定义标注点上方的气泡窗口 ({content,color,fontSize,borderRadius,bgColor,padding,boxShadow,display})
label Object N 为标记点旁边增加标签({color,font Size,content,x,y},可识别换行符,x,y原点是marker对应的经纬度)
polyline

指定一系列坐标点,从数组第一项连线至最后一项

参数名 参数类型 必传 描述
points Array Y 经纬度数组([{latitude:0,longitude:0}])
color String N 线的颜色(8位16进制表示,后两位表示alpha值,如:#000000AA)
width Number N 线的宽度
dotted'Line Boolean N 是否是虚线(默认false)
// .wxml

// .js 
Page({
    data: {
        polyline:[{
            points:[{
                latitude:'40.006822',
                longitude:'116.481451'
             }, {
                longitude: '116.487847',
                latitude: '40.002607'
             }, {
                longitude: '116.496507',
                latitude: '40.006103'
             }, {
                latitude:'40.002607',
                longitude: '116.587847',
            }],
            width:2,
            color:'#000000AA',
            dottedLine:false
        }]
    }
})
circles

在地图上显示圆

参数名 参数类型 必传 描述
longitude Number Y 中心经度(浮点数,范围:-180~180)
latitude Number Y 中心纬度(浮点数,范围:-90~90)
color String N 描边颜色(8位16进制表示,后两位表示alpha值,如:#000000AA)
fill'Color String N 填充颜色(8位16进制表示,后两位表示alpha值,如:#000000AA)
strokeWidth Number N 描边宽度
radius Number Y 半径
// .wxml

// .js 
Page({
    data: {
        circles:[{
            latitude:40.002607,
            longitude: 116.587847,
            color: '#ee7788aa',
            radius: 50,
            fillColor:'#7cb5ec88',
            strokeWidth:1
        }]
    }
})
controls

在地图上显示控件,控件不随地图移动

参数名 参数类型 必传 描述
id Number N 控件id(在控件点击事件回调返回此id)
position Object Y 控件在地图的位置(控件相对地图位置)
icon'Path String Y 显示的图标(项目路径下的路径,支持相对路径写法,以‘/’开头表示相对小程序的根目录)
clickable Boolean N 是否可点击(默认不可点击)

position

参数名 参数类型 必传 描述
left Number N 距离地图左边界的距离(默认为0)
top Number N 距离地图上边界的距离(默认为0)
width Number N 控件宽度(默认图片宽度)
height Number N 控件高度(默认图片高度)
// .wxml

// .js 
Page({
    data: {
        controls: [{
            id: 1,
            iconPath: '../../img/marker_yellow.png',
            position: {
                left: 10,
                top: 360,
                width: 35,
                height: 35
            },
            clickable: true
        }]
    }
}),
controltap: function (e) {
    console.log(e.controlId); # 控件id 1
}
#可以通过在map上添加一个按钮,来实现诸如:定位、状态返回等操作。 
#(直接通过布局文件在map上添加view是显示不出来的)
绑定事件
参数名 参数类型 描述
bindmarkertap EventHandel 点击标记点时触发
bindcontroltap EventHandel 点击控件时触发
bindregionchange EventHandel 视野发生变化时触发
bindtap EventHandel 点击地图时触发
BUG

关于经纬度,官方文档上都写的是Number类型。但是通过IDE调试的时候,写成字符串也是可以的。但是在IOS真机上运行时,markers却显示不出来,也不报错。

后来自己对照属性的类型,发现后台传来的经纬度是字符串类型的。而字符串类型的经纬度在IOS真机上经测试就是显示不出来。

所以将字符串转成Number类型即可。

附原始手册地址:http://blog.csdn.net/crazy1235/article/details/55004841

你可能感兴趣的:(小程序地图控件基本使用)