map

marker说明

marker上的callout说明

marker上的label说明

marker上的自定义气泡customCallout说明

使用方式如下，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>

约束与限制：

• customCallout存在时将忽略callout与title属性。

• 自定义气泡支持使用view、image、cover-view、cover-image定制。

• 自定义气泡数量建议不要超过50个。

• callout插槽内的节点绑定的手势事件不会生效（如bindtap、bindtouchstart等）。如需处理气泡点击事件，可通过地图组件的bindcallouttap属性实现。

polygon说明

circle说明

polyline说明

setting说明

用于统一配置地图属性，解决rotate、skew等动画属性分开设置无法同时生效的问题。

this.setData({
  // 仅设置的属性会生效，其它的属性不受影响
  setting: {
    skew: 20,
    rotate: 90,
    showLocation: true,
    enableOverlooking: true,
    enableTraffic: true
  }
});

示例：

• 场景一：设置marker标记

  hxml文件：

  <view>
    <map
      id="map"
      style="width: 100%; height: 100vh"
      latitude="{{ latitude }}"
      longitude="{{ longitude }}"
      markers="{{ markers }}"
      scale="{{ scale }}"
      show-location="{{ showLocation }}"
      bindmarkertap="bindmarkertap"
      bindtap="bindtap"
      bindupdated="bindupdated"/>
  </view>

  js文件：

  Page({
    data: {
      showLocation: true,
      latitude: 23.106574,
      longitude: 113.324587,
      scale: 10,
      markers: [
        {
          id: 0,
          latitude: 23.13065, // 纬度
          longitude: 113.3274, // 经度
          title: '我是marker标记点', // 标注点名
          zIndex: 1,
          iconPath: 'xxx/xxx.png', // 显示的图标
          rotate: 10, // 旋转度数
          alpha: 1, // 透明度
          anchor: { x: 0.5, y: 1 },
          clickable: true
        }
      ]
    },
    bindmarkertap(e) {
      console.info('markertap标记=', e);
    },
    bindtap(e) {
      console.info('bindtap标记=', e);
    },
    bindupdated(e) {
      console.info('bindupdated标记=', e);
    }
  });

• 场景二：设置marker标记上的气泡callout

  hxml文件：

  <view>
    <map
      id="map"
      style="width: 100%; height: 100vh"
      latitude="{{ latitude }}"
      longitude="{{ longitude }}"
      scale="{{ scale }}"
      markers="{{ markers }}"
      bindcallouttap="bindcallouttap"/>
  </view>

  js文件：

  Page({
    data: {
      latitude: 23.106574,
      longitude: 113.324587,
      scale: 10,
      markers: [
        {
          id: 0,
          latitude: 23.13065, // 纬度
          longitude: 113.3274, // 经度
          zIndex: 1,
          iconPath: 'xxx/xxx.png', // 显示的图标
          clickable: true,
          callout: {
            content: 'callout标题',
            padding: 5,
            bgColor: '#FFFFFF',
            color: '#000000',
            fontSize: 15,
            weight: 'Normal',
            fontStyle: 'Normal',
            textAlign: 'Center',
            borderWidth: 2,
            borderColor: '#FF0000',
            borderRadius: 10
          }
        }
      ]
    },
    bindcallouttap(e) {
      console.info('bindcallouttap标记=', e);
    }
  });

• 场景三：设置marker标记旁边的标签label

  hxml文件：

  <view>
    <map
      id="map"
      style="width: 100%; height: 100vh"
      latitude="{{ latitude }}"
      longitude="{{ longitude }}"
      scale="{{ scale }}"
      markers="{{ markers }}"/>
  </view>

  js文件：

  Page({
    data: {
      latitude: 23.106574,
      longitude: 113.324587,
      scale: 10,
      markers: [
        {
          id: 0,
          latitude: 23.13065, // 纬度
          longitude: 113.3274, // 经度
          zIndex: 1,
          iconPath: 'xxx/xxx.png', // 显示的图标
          clickable: true,
          label: [
            {
              content: 'label标题',
              color: '#000000',
              fontSize: 15,
              strokeColor: '#FF0000',
              strokeWidth: 10,
              fontStyle: 'REGULAR',
            }
          ]
        }
      ]
    }
  });

• 场景四：设置circle

  hxml文件：

  <view>
    <map
      id="map"
      style="width: 100%; height: 100vh"
      latitude="{{ latitude }}"
      longitude="{{ longitude }}"
      scale="{{ scale }}"
      circles="{{ circles }}"/>
  </view>

  js文件：

  Page({
    data: {
      latitude: 23.106574,
      longitude: 113.324587,
      scale: 12,
      circles: [{
        latitude: 23.106574,
        longitude: 113.324587,
        color: '#000000ff',
        fillColor: '#ff0000',
        radius: 1000,
        strokeWidth: 10,
        zIndex: 1
      }]
    }
  });

• 场景五：设置多边形polygon

  hxml文件：

  <view>
    <map
      id="map"
      style="width: 100%; height: 100vh"
      latitude="{{ latitude }}"
      longitude="{{ longitude }}"
      scale="{{ scale }}"
      polygons="{{ polygons }}"/>
  </view>

  js文件：

  Page({
    data: {
      latitude: 23.106574,
      longitude: 113.324587,
      scale: 12,
      polygons: [{
        points: [
          { longitude: 113.314587, latitude: 23.116574 },
          { longitude: 113.314587, latitude: 23.096574 },
          { longitude: 113.334587, latitude: 23.096574 },
          { longitude: 113.334587, latitude: 23.116574 }
        ],
        strokeWidth: 10,
        strokeColor: '#000000',
        fillColor: '#FF0000',
        zIndex: 10
      }]
    }
  });

• 场景六：设置路线polyline

  hxml文件：

  <view>
    <map
      id="map"
      style="width: 100%; height: 100vh;"
      latitude="{{ latitude }}"
      longitude="{{ longitude }}"
      polyline="{{ polyline }}"
      scale="{{ scale }}"
      show-location="{{ showLocation }}"/>
  </view>

  js文件：

  Page({
    data: {
      showLocation: true,
      latitude: 30.490487597079223,
      longitude: 114.53563002817789,
      scale: 12,
      polyline: [{
        points: [
          { latitude: 30.490487597079223, longitude: 114.53563002817789 },
          { latitude: 30.490559597079223, longitude: 114.55880402817789 }
        ],
        color: '#FF0000',
        zIndex: 0
      }]
    }
  });

• 场景七：设置marker自定义气泡customCallout

  hxml文件：

  <view>
    <map
      id="map"
      style="width: 100%; height: 100vh"
      latitude="{{ latitude }}"
      longitude="{{ longitude }}"
      scale="{{ scale }}"
      markers="{{ markers }}"
      bindcallouttap="bindcallouttap">
      <cover-view slot="callout">
        <cover-view class="customCallout" marker-id="1">
          marker-1
        </cover-view>
      </cover-view>
    </map>
  </view>

  js文件：

  Page({
    data: {
      latitude: 23.106574,
      longitude: 113.324587,
      scale: 10,
      markers: [
        {
          id: 1,
          latitude: 23.095994,
          longitude: 113.325520,
          customCallout: {
            anchorY: 0,
            anchorX: 0,
            display: 'ALWAYS'
          }
        }
      ]
    },
    bindcallouttap(e) {
      console.info('点击标记点气泡，Marker ID:', e.detail.markerId);
    }
  });

  css文件：

  .customCallout {
      box-sizing: border-box;
      background-color: #fff;
      border: 1px solid #ccc;
      border-radius: 15px;
      width: 150px;
      height: 30px;
      display: inline-flex;
      padding: 5px 20px;
      justify-content: center;
      align-items: center;
  }