携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第14天，点击查看活动详情

小程序为我们提供了map组件以及对应的api，使用map需指定中心点经纬度，markers用于在地图添加标记点，polyline用于在地图绘制路线。circles用于在地图绘制圆，polygons用于绘制多边形，scale设置地图的缩放级别（3-20），具体详细信息可以看地图map的使用，本文主要实现以下效果。

地图实例

<map id="mymap" style="width: 100%; height: 100%;" longitude="{{mapCenter.longitude}}" latitude="{{mapCenter.latitude}}"
    scale="{{scale}}" markers="{{markers}}" polyline="{{polylineSettings}}" include-points="polygons"
    setting="{{mapSettings}}" bindregionchange="updatedMap">
</map>

地图基础设置

 mapSettings: { // 统一设置地图配置
    skew: 0, // 倾斜角度
    rotate: 0, // 旋转角度
    showScale: false, // 显示比例尺，工具暂不支持
    subKey: '', // 个性化地图使用的key
    layerStyle: 1, // 个性化地图配置的 style
    enableZoom: true, // 缩放
    enableScroll: true, // 拖动
    enableRotate: false, // 旋转
    showCompass: false, // 指南针
    enable3D: false, // 展示3D楼块(工具暂不支持）
    enableOverlooking: false, // 俯视
    enableSatellite: false, // 卫星图
    enableTraffic: false, // 实时路况
},

中心点经纬度

使用地图需指定中心点的经纬度，不指定的话默认是北京市

 mapCenter: {
    longitude: 113.324520,
    latitude: 23.099994
},

标记点markers

标记点用于在地图上显示标记的位置

markers: [{
    iconPath: "/image/location.png",// 显示的图标的路径
    id: 1,
    width: 25,
    height: 40,
    longitude: 113.324520,
    latitude: 23.099994,
    rotate: 0, //旋转角度 默认0
    anchor: {
        x: .5,
        y: .5
    },

标记点的窗口显示

效果如图，marker上的气泡callout，其中display有2个枚举值，分别是'BYCLICK':点击显示; 'ALWAYS':常显

代码如下

  callout: { //  标记点上方的气泡窗口
    content: '轨迹回放',// 文本内容
    color: '#000',// 颜色
    fontSize: 16,
    borderRadius: 3,
    borderWidth: 1,
    borderColor: '#07c160',
    bgColor: '#fff',
    padding: 5,
    textAlign: 'center',
    display: 'BYCLICK'// 点击出现
},

路线polyline

其中polyline是数组，可以放置多个路线数组，可以设置不同的颜色color，宽度width，虚实线arrowLine等等。

 polylineSettings: [{ // 路线
    points: [{
        latitude: 22.596206,
        longitude: 113.87317,
        gpsBearing: 244
    }, {
        latitude: 22.596216,
        longitude: 113.873192,
        gpsBearing: 244
    }, {
        latitude: 22.596213,
        longitude: 113.873177,
        gpsBearing: 244
    }],
    color: "#7b7af8",
    width: 5,
    borderWidth: 2,
    borderColor: '#7b7af8',
    level: 'abovebuildings', // 压盖关系
    arrowLine: true // 带箭头的线
 ]}

map地图实例-运动轨迹（一）