小程序(十一)之地图

本节知识点

• 地图map的基本使用
• 地图标记
• 地图覆盖物

map属性

• longitude 类型Num 经度
• latitude 类型Num 纬度
• scale 类型Num 缩放级别取值范围5-18
• markers Array 标记点
• polyline Array 路线
• circles Array 圆
• controls Array 控件
• include-points Array 缩放视野以包含所有给定的坐标点
• show-location Boolean 显示带有方向的当前定位点
• bindmarkertap 事件名称 点击标记点时候触发
• bindcallouttap 事件名称 点击标记点对应的气泡触发
• bindcontroltap 事件名称 点击控件时候触发
• bindregionchange 事件名称 视野发生变化时触发
• bindtap 事件名称 点击地图时候触发

<map id="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: 300px;"></map>

index.js文件,要是简单的使用只需要把标记点和map里面的经纬度换换即可

Page({
  data: {
    markers: [{
      iconPath: "/resources/others.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:"#FF0000DD",
      width: 2,
      dottedLine: true
    }],
    controls: [{
      id: 1,
      iconPath: '/resources/location.png',
      position: {
        left: 0,
        top: 300 - 50,
        width: 50,
        height: 50
      },
      clickable: true
    }]
  },
  regionchange(e) {
    console.log(e.type)
  },
  markertap(e) {
    console.log(e.markerId)
  },
  controltap(e) {
    console.log(e.controlId)
  }
})