开发文档

map

地图。

marker

支持的地图类型

marker

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

marker 上的气泡 callout

marker 上的自定义气泡 customCallout customCallout存在时将忽略callout与title属性。自定义气泡采用采用cover-view定制，灵活度更高。

使用方式如下，map 组件下添加名为 callout 的 slot 节点，其内部的 cover-view 通过 marker-id 属性与 marker 绑定。当 marker 创建时，该 cover-view 显示的内容将作为 callout 显示在标记点上方。

<map>
  <cover-view slot="callout">
    <cover-view marker-id="1"></cover-view>
    <cover-view marker-id="2"></cover-view>
  </cover-view>
</map>

marker 上的气泡 label

polyline

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

circle

在地图上显示圆

polygon

指定一系列坐标点，根据 points 坐标数据生成闭合多边形

setting

提供 setting 对象统一设置地图配置。同时对于一些动画属性如rotate和skew，通过setData分开设置时无法同时生效，需通过settting统一修改。

const setting = {
  skew: 0,
  rotate: 0,
  showLocation: false,
  showScale: false,
  subKey: '',
  layerStyle: 1,
  enableZoom: true,
  enableScroll: true,
  enableRotate: false,
  showCompass: false,
  enable3D: false,
  enableOverlooking: false,
  enableSatellite: false,
  enableTraffic: false,
}
this.setData({
  // 仅设置的属性会生效，其它的不受影响
  setting: {
    enable3D: true,
    enableTraffic: true
  }
})

regionchange 返回值

视野改变时，regionchange 会触发两次，返回的 type 值分别为 begin 和 end。

e = {causedBy, type, detail: {rotate, skew, scale, centerLocation, region}}

Tips：

• 地图组件集成了各厂家地图的 JavaScript 版本，需要开发者自行申请对应的key，使用 subKey 设置
• 根据设置的地图类型，请你使用对应地图的坐标系坐标
• subSetting 可通过此属性添加未集成的控件属性，属性值参考各地图的 JS API文档

示例代码：

<!--pages/component/pages/map/map.mcml-->
<view style="width:100%;height:100%;overflwo:hidden;">
  <view bindtap="bindtestap" style="width:100%;height:50%;">
    <map 
      type="{{type}}"
      viewMode="{{viewMode}}"
      latitude="{{latitude}}"
      longitude="{{longitude}}"
      scale="{{scale}}"
      min-scale="{{minScale}}"
      max-scale="{{maxScale}}"
      skew="{{skew}}"
      rotate="{{rotate}}"
      enable-3D="{{enable3D}}"
      show-compass="{{showCompass}}"
      show-scale="{{showScale}}"
      enable-zoom="{{enableZoom}}"
      enable-scroll="{{enableScroll}}"
      enable-rotate="{{enableRotate}}"
      enable-satellite="{{enableSatellite}}"
      enable-road="{{enableRoad}}"
      enable-traffic="{{enableTraffic}}"
      enable-poi="{{enablePoi}}"
      enable-building="{{enableBuilding}}"
      show-location="{{showLocation}}"
      enable-overlooking="{{enableOverlooking}}"
      include-points="{{includePoints}}"

      markers="{{markers}}"
      polyline="{{polyline}}"
      polygons="{{polygons}}"
      circles="{{circles}}"

      bindtap="bindevent"
      bindlabeltap="bindevent"
      bindmarkertap="bindevent"
      bindcontroltap="bindevent"
      bindcallouttap="bindevent"
      bindupdated="bindevent"
      bindregionchange="bindevent"
      bindpoitap="bindevent"
      bindanchorpointtap="bindevent"
    >
      <cover-view slot="callout">
        <cover-view marker-id="1">我是customCallout</cover-view>
      </cover-view>
    </map>
  </view>
  <scroll-view scroll-y>
    <view class="container">
      <view class="statement">地图。</view>
      <view class="cssname">type: 修改后地图会重新初始化</view>
      <view>
        <radio-group bindchange="typeChanged">
          <radio checked value="tmap">腾讯</radio>
          <radio value="bmap">百度</radio>
          <radio value="amap">高德</radio>
        </radio-group>
      </view>
      <view class="cssname">viewMode: 修改后地图会重新初始化</view>
      <view>
        <radio-group bindchange="viewModeChanged">
          <radio checked value="3D">3D</radio>
          <radio value="2D">2D</radio>
        </radio-group>
      </view>

      <view class="cssname">scale</view>
      <slider min="{{minScale}}" max="{{maxScale}}" bindchange="scaleChanged" show-value value="16">缩放级别</slider>
      
      <view class="cssname">min-scale, max-scale</view>
      <checkbox-group bindchange="limitScale">
        <checkbox name="scale" value="scale">限制缩放级别: 10-15</checkbox>
      </checkbox-group>

      <view class="cssname">rotate</view>
      <slider min="0" max="360" bindchange="rotateChanged" show-value value="0">旋转角度</slider>

      
      <view class="cssname">skew</view>
      <slider min="0" max="80" bindchange="skewChanged" show-value value="0">倾斜角度</slider>

      <view class="cssname">include-points</view>
      <button bindtap="includeTap">视野包含指定坐标点</button>

      <block mc:for="{{properties}}">
        <view class="cssname">{{item.name}}</view>
        <view class="propClass">
          <view>{{item.desc}}</view>
          <switch checked="{{item.checked}}" bindchange="propChanged" data-prop="{{item.prop}}"></switch>
        </view>
      </block>

      <block mc:for="{{events}}">
        <view class="cssname">{{item.name + ":" + item.desc}}, 参数event.detail</view>
        <text space="nbsp" user-select="true" class="scrollDetail">{{item.detail || ''}}</text>
      </block>
    </view>
  </scroll-view>
</view>

// pages/component/pages/map/map.js
var _properties = [
  {name: 'enable-3D', prop:'enable3D', desc: '展示3D楼块', checked: false},
  {name: 'show-compass', prop:'showCompass', desc: '显示指南针', checked: false},
  {name: 'show-scale', prop:'showScale', desc: '显示比例尺', checked: false},
  {name: 'show-location', prop:'showLocation', desc: '显示带有方向的当前定位点', checked: false},
  {name: 'enable-overlooking', prop:'enableOverlooking', desc: '开启俯视', checked: false},
  {name: 'enable-zoom', prop:'enableZoom', desc: '是否支持缩放', checked: true},
  {name: 'enable-scroll', prop:'enableScroll', desc: '是否支持拖动', checked: true},
  {name: 'enable-rotate', prop:'enableRotate', desc: '是否支持旋转', checked: false},
  {name: 'enable-satellite', prop:'enableSatellite', desc: '是否开启卫星图', checked: false},
  {name: 'enable-traffic', prop:'enableTraffic', desc: '是否开启实时路况', checked: false},
  {name: 'enable-poi', prop:'enablePoi', desc: '是否展示 POI 点', checked: true},
  {name: 'enable-building', prop:'enableBuilding', desc: '是否展示建筑物', checked: true}
];
var _data = {};
_properties.forEach(function (_prop) {
  _data[_prop.prop] = _prop.checked
  
})
Page({
  data: Object.assign({
    includePoints: [
    ],
    latitude:39.90923,
    longitude:116.397428,
    type: 'tmap',
    scale: 13,
    minScale: 3,
    maxScale: 20,
    skew: 0,
    markers:[
      {
        clusterId: 'c0',
        latitude:39.910,
        longitude: 116.404,
        zIndex: 10,
        rotate: 0,
        alpha: 0.8,
        title: '我是title',
        label:{
          content: '我是label1',
          borderColor:'#ff0000',
          borderWidth: '1',
          anchorX: 10
        }
      },
      {
        clusterId: 'c1',
        latitude:39.915,
        longitude: 116.395,
        width:30,
        height:30,
        zIndex: 1,
        rotate: 90,
        alpha: 1,
        anchor: {x: 0.5, y: 0.5},
        iconPath: '/assets/images/car.png',
        callout: { content:'我是callout', color: '#00ff00'},
        subsetting: {
          faceTo: 'map'
        }
      },
      {
        id: 1,
        clusterId: 'c1',
        latitude:39.918,
        longitude: 116.394,
        zIndex: 0,
        alpha: 1,
        customCallout: {}
      }
    ],
    polyline:[
      {
        points: [
          { latitude:39.915, longitude: 116.395}, 
          { latitude:39.915, longitude: 116.405}, 
          { latitude:39.900, longitude: 116.425}, 
          { latitude:39.900, longitude: 116.415}
        ],
        colorList: ['#0000ff', '#00ff00', '#ff0000'],
        width: 6,
        color: '#0000ff',
        arrowLine: true,
        arrowIconPath: '/assets/images/car.png',
        dottedLine: false
      },
      {
        points: [
          { latitude:39.920, longitude: 116.387}, 
          { latitude:39.918, longitude: 116.394}
        ],
        width: 3,
        color: '#0000ff',
        dottedLine: true
      }
    ],
    polygons:[
      {
        points: [
          { latitude:39.920, longitude: 116.387}, 
          { latitude:39.923, longitude: 116.385}, 
          { latitude:39.937, longitude: 116.394}, 
          { latitude:39.931, longitude: 116.401}
        ],
        strokeWidth: 2,
        strokeColor: '#0000ff',
        fillColor: '#ff000070'
      }
    ],
    circles: [
      {
        latitude:39.900, longitude: 116.425,
        radius: 1000,
        color: '#0000ff',
        strokeWidth: 2,
        fillColor: '#ff000070'
      }
    ],
    properties:_properties,
    events:[
      {"name" : "bindtap", "desc" : "点击地图时触发"},
      {"name" : "bindmarkertap", "desc" : "点击标记点时触发"},
      {"name" : "bindlabeltap", "desc" : "点击label时触发"},
      {"name" : "bindcallouttap", "desc" : "点击标记点对应的气泡时触发"},
      {"name" : "bindupdated", "desc" : "在地图渲染更新完成时触发"},
      {"name" : "bindregionchange", "desc" : "视野发生变化时触发"},
      {"name" : "bindpoitap", "desc" : "点击地图poi点时触发"},
      {"name" : "bindanchorpointtap", "desc" : "点击定位标时触发"}
    ]
  }, _data),
  includeTap: function () {
    this.setData({
      includePoints: [
        { latitude:39.920, longitude: 116.387}, 
        { latitude:39.923, longitude: 116.385}, 
        { latitude:39.937, longitude: 116.394}, 
        { latitude:39.931, longitude: 116.401},
        { latitude:39.915, longitude: 116.395}, 
        { latitude:39.915, longitude: 116.405}, 
        { latitude:39.900, longitude: 116.425}, 
        { latitude:39.900, longitude: 116.415}
      ]
    })
  },
  viewModeChanged: function (e) {
    this.setData({
      viewMode: e.detail.value
    })
  },
  typeChanged: function (e) {
    this.setData({
      type: e.detail.value
    })
  },
  limitScale: function (e) {
    if(e.detail.value.length > 0){
      this.setData({
        minScale: 10,
        maxScale: 15
      })
    }
    else{
      this.setData({
        minScale: 3,
        maxScale: 20
      })
    }
  },
  scaleChanged: function(e){
    this.setData({
      scale: e.detail.value
    })
  },
  skewChanged: function(e){
    this.setData({
      skew: e.detail.value
    })
  },
  rotateChanged: function (e) {
    this.setData({
      rotate: e.detail.value
    })
  },
  propChanged: function(e){
    var data = {};
    data[e.currentTarget.dataset.prop] = e.detail.value;
    this.setData(data);
  },
  bindevent: function(e){
    var eventName = 'bind' + (['begin', 'end'].indexOf(e.type) > -1 ? 'regionchange' : e.type);
    var index = 0;
    for(var i = 0; i < this.data.events.length; i++){
      if(this.data.events[i].name == eventName){
        index = i;
        break;
      }
    }
    var eventIndex = 'events[' + index + '].detail';
    this.setData({
      [eventIndex] : JSON.stringify(e, null, 2)
    })
    console.log(e);
  }
})