在小程序中可以使用

我们先来了解一下

• longitude：经度

• latitude：纬度

• scale：缩放级别，默认值时16，取值范围是5到18

• controls：在地图上放置的控件数组

• markers：在地图上放置的标记点数组

• show-location：显示带有方向的当前定位点

• bindcontroltap：点击控件时触发的事件

• bindmarkertap：点击标记点时触发的事件

• bindregionchange：视野发生变化时触发的事件

下面的布局文件中放置了一个 标签，并设置了上述的属性。

<map longitude="113.324520" latitude="23.099994"
scale="14" controls="{{controls}}"
bindcontroltap="controltap" markers="{{markers}}"
bindmarkertap="markertap" polyline="{{polyline}}"
bindregionchange="regionchange" show-location
style="width: 100%; height: 100%;"/>

显示的效果如图 1 所示。

图1显示腾讯地图

在地图上，显示了一个标记（笑脸图像）和一个控件图像（蓝精灵图像）。可能很多同学会问，标记和控件到底有什么区别呢？不都可以放置图像吗？实际上，标记和控件是基本相同的，主要区别只有一点，标记会随着地图移动，而控件不会随着地图移动。

在

Page({
  data: {
    markers: [{
      iconPath: "/image/face.png",   //  标记图像
      id: 0,
      latitude: 23.099994,
      longitude: 113.324520,
      width: 50,
      height: 50
    }],
    polyline: [{                     //  在地图上通过经纬度绘制折线
      points: [{
        longitude: 113.3245211,
        latitude: 23.10229
      }, {
        longitude: 113.324520,
        latitude: 23.21229
      }],
      color:"#FF00FF",
      width: 5,
      dottedLine: false
    }],
    controls: [{
      id: 1,
      iconPath: '/image/sprite.png',   //  控件图像
      position: {
        left: 0,
        top: 260 - 80,
        width: 80,
        height: 80
      },
      clickable: true                 //  设为控件可单击的状态
    }]
  },
  regionchange(e) {
    console.log(e.type)
  },
  markertap(e) {
    console.log(e.markerId)
  },
  controltap(e) {
    console.log(e.controlId)
  }
})

我们看到，在这段代码中，有三个数组： markers 、 polyline 和 controls 。这三个数组都通过对象定义了多个属性。其中 markers 和 controls 数组中属性类似，前者每个数组元素表示一个标记，后者一个数组元素表示一个控件。 ployline 中每个数组元素表示一条折线（通过经纬度确定折线中的每个点）。这些折线（本例只是一条直线），从笑脸标记头顶中心部位向上延伸。

点击控件和标记都可以点击，点击后， Console 中输出的日志信息如图 2 所示。在日志信息中分别输出了在 markers 和 controls 数组中定义的 id 属性值。

图2  点击标记和控件输出的日志信息