微信小程序-地图map的使用

这是我参与8月更文挑战的第1天，活动详情查看：8月更文挑战

最近刚刚开发小程序，还有很多不懂的地方，记录一下，以备不时之需，温故而知新。

一、map

map的常用属性

属性名	属性说明
longitude	经度
latityde	纬度
scale	缩放级别，取值范围3-20
min-scale	最小缩放级别，默认值3
max-scale	最大缩放级别
markers	标记点
polyline	路线
circles	圆
include-points	缩放视野包含所有坐标点

 <map type="2d" id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="{{scale}}"
        markers="{{markers}}" polyline="{{polyline}}" style="width: 100%; height: 100%" show-location
        show-compass enable-rotate>
    </map>

二、marker

地图的标记点

属性名	属性说明
content	气泡文本
color	文本颜色
fontSize	文本大小
borderRadius	边框圆角
borderWidth	边框颜色
bgColor	背景色
padding	文本边缘留白

三、polyline

指定一系列坐标点，从数组第一项连线至最后一项.绘制彩虹线时，需指定不同分段的颜色，如 points 包含 5 个点，则 colorList 应传入 4 个颜色值；若 colorList 长度小于 points.length - 1，则剩下的分段颜色与最后一项保持一致。

属性名	属性说明
points	经纬度数组
color	线的颜色
colorList	彩虹线
width	线宽
dottedLine	是否虚线
arrowLine	带箭头的线
borderColor	线的边框颜色
borderwidth	线厚度
level	层级

其中level 字段表示与其他地图的层级关系，具体如下

属性名	属性说明
aboverLabels	在所有poi上
abovebuildings	在楼块之上poi之下
aboveroads	道路之上楼块之下

四、polygon

根据points形成闭合多边形

属性名	属性说明
points	经纬度数组
strokeWidth	描边宽度
strokeColor	描边颜色
fillColor	填充颜色
level	层级

五、circle

根据经纬度和半径形成圆

属性名	属性说明
longitude	经度
latityde	纬度
color	描边颜色
fillColor	填充颜色
strokeWidth	描边宽度
radius	半径
level	层级

$map的属性基本都可以掌握，一般map会和位置结合使用，下面我们一起去看看吧！$

六、 wx.startLocationUpdateBackground

wx.startLocationUpdateBackground(Object object) 以Promise风格调用，需要引导用户授权（scope.userLocationBackground）

开启小程序进入前后台时均接受消息

七、 wx.startLocationUpdate

以Promise风格调用，需要引导用户授权（scope.userLocation）

开启小程序进入前台时接收位置消息

八、wx.onLocationChange

以Promise风格调用

监听实时地理位置变化事件，需结合 wx.startLocationUpdateBackground、wx.startLocationUpdate使用。

九、wx.getLocation

以Promise风格调用，需要引导用户授权（scope.userLocation）

获取当前地理位置，速度，用户离开小程序后，此接口无法调用。
开启高精度定位，接口耗时会增加
地图的坐标格式为gcj02
高频调用会耗电，需要持续定位可使用 wx.onLocationchange

参数说明

object object

属性名	属性说明
type	wgs84返回gps坐标，gcj02返回可用于wx.openLocation坐标，默认值是wgs84
altitude	传true会返回高度信息，会减慢接口返回速度
isHighAccuracy	高度精度定位
highAccuracyExpireTime	高精度定位超市时间（ms）3000ms以上高精度定位才有效果

object.success 回调函数

属性名	属性说明
longitude	经度, 范围-90~90，负数表示南纬
latityde	纬度, 范围-180~180，负数表示西经
speed	速度（m/s）
accuracy	位置的精准度
altitude	宽度(m)
verticalAccuracy	垂直精度（Android无法获取，返回0）
horizontalAccuracy	水平精度

wx.getLocation({
 type: 'gcj02',
 success (res) {
   const latitude = res.latitude
   const longitude = res.longitude
   const speed = res.speed
   const accuracy = res.accuracy
 }
})