地图组件用来开发与地图有关的应用，如共享单车、美团点评、滴滴打车、查看附近电影院订票软件、外卖送餐轨迹等都会用到地图组件

在地图组件上可以标记覆盖物以及指定一系列的坐标位置，如某个自行车或餐厅的位置，如图3.16所示
image.png
map组件的属性有很多，这里列出常用的属性，如表3.15所示

map组件常用的属性

image.png

属性名 类型 默认值 说明
bindmarkertap eventhandle 点击标记点时触发，e.detail={markerId}
bindlabertap eventhandle 点击label时触发，e.detail={markerId}
bindcontroltap eventhandle 点击控件时触发，e.detail={controlId}
bindcallouttap eventhandle 点击标记点对应的气泡时触发，e.detail={markerId}
bindupdated eventhandle 在地图渲染更新完成时触发
bindregionchange eventhandle 视野发生变化时触发
bindpoitap eventhandle 点击地图poi点时触发，e.detail={name,longitude,latitude}

地图组件使用示例

  1. index.wxml
  2. ----------------
  3. <view class="container">
  4.    <map
  5.         style="width: 100%; height: 300px;"
  6.         latitude="{{latitude}}"
  7.         longitude="{{longitude}}"
  8.         scale="{{14}}"
  9.         markers="{{markers}}"
  10.         enable-3D
  11.         show-compass="{{showCompass}}"
  12.         show-location="{{showLocation}}"
  13.         enable-zoom
  14.         enable-rotate
  15.         enable-overlooking
  16.         enable-scroll
  17.       >
  18.       </map>
  19. </view>
  20. ------------------------------------------------------------
  21. index.js
  22. -----------
  23. Page({
  24.   data: {
  25.     latitude: 40.011516,
  26.     longitude: 116.31059,
  27.     markers: [{
  28.       latitude: 40.011516,
  29.       longitude: 116.31059,
  30.       name: '圆明园'
  31.     }],
  32.     enable3d: true,
  33.     showCompass: true,
  34.     showLocation:true,
  35.     enableOverlooking: true
  36.   },
  37.   toggle3d() {
  38.     this.setData({
  39.       enable3d: !this.data.enable3d
  40.     })
  41.   }
  42. })