安装

tnpm install --save @alipay/adc-map-marker

组件介绍

行业小程序adc-map-marker组件，仿高德地图的布局和交互方式。

使用限制

需要禁止页面下拉。在app.json，或具体页面的json中配置{ "allowsBounceVertical": "NO" }。

参数说明

支持小程序原生map组件的所有参数和事件，这一部分请查看小程序map文档。 以下为组件的新参数：

属性 | 必填 | 参数类型 | 参数说明 | 默认值 | 示例 --|:--:|:--:|:--:|:--: | :-: showMap | 否 | Boolean | 是否显示地图 | true | -- mapId | 否 | String | 地图id | 'map' | -- marginTop | 否 | String | 如果本组件不是位于页面顶部，则需设置此高度，告知组件距离页面顶部的高度。支持px, vh, rpx | '0px' | -- showSearchMap | 否 | Boolean | 是否显示“在此区域搜索”按钮 | false | -- useDefaultScrollView | 否 | Boolean | 组件footer区域，是否使用组件自带的scroll-view元素。如果想使用自定义的scroll-view或其他容器，需要设置为false | true | -- footerContainerClassName | 否 | String | footer外部容器css类名 | '' | -- showFooter | 否 | Boolean | 是否显示footer | true | -- showDirectionBtn | 否 | Boolean | 是否显示footer上部的方向按钮 | true | -- enableScroll | 否 | String | 是否允许footer的scroll-view元素滚动。取值为'on'，'off'，'auto'。'on'允许滚动，'off'禁止滚动，'auto'交由组件来管理是否允许滚动（只有footer处于顶部才允许滚动） | 'auto' | -- enableTouchMove | 否 | Boolean | 是否允许滑动手势拉伸footer | true | -- autoToBottom | 否 | Boolean | 是否允许滑动地图自动收起footer | true | -- simpleMarkers | 否 | Array | 地图上的markers | [] | [{ id: 2, text: 'XX大厦', longitude: 104.091, latitude: 30.611 }] footer | 否 | Object | footer插槽容器的显示高度。高度的设置支持number类型的px和string类型的vh。bottom可设为0，代表不用这一档的高度。 | { top: '90vh', middle: '45vh', bottom: '15vh' } | -- onSearchMap | 否 | Function | “在此区域搜索”按钮点击事件。params: ({longitude: number, latitude: number, scale: number}): void; | null | -- onMoveToLocation | 否 | Function | “回到指定地点”按钮点击事件。点击默认会调用mapContex.moveToLocation。返回false可阻止这个行为。params:(event): boolean | void | null | -- onFooterStatusChange | 否 | Function | footer容器高度改变时的事件。params: (status: 'top' | 'bottom' | 'middle'): void; | null | --

simpleMarkers说明

simpleMarkers是用原生markers封装的模板，支持部分属性的自定义配置，支持动态改变配置数据。 但如果需要高度定制的marker，可自行按照原生marker的方式去写。如果使用了原生markers，simpleMarkers不再生效。

属性 | 必填 | 参数类型 | 参数说明 | 默认值 | 示例 --|:--:|:--:|:--:|:--: | :-: id | 是 | number | string | marker的唯一标识 | -- | -- longitude | 是 | number | 经度 | -- | -- latitude | 是 | number | 纬度 | -- | -- width | 否 | number | marker图标宽度 | 18 | -- height | 否 | number | marker图标高度 | 25 | -- activeWidth | 否 | number | marker选中后的图标宽度 | 24 | -- activeHeight | 否 | number | marker选中后的图标高度 | 35 | -- iconPath | 否 | string | marker图标路径（绝对路径） | 默认图标路径 | -- activeIconPath | 否 | string | marker选中后的图标路径（绝对路径） | 默认选中图标路径 | --

获取mapContext

const mapContext = my.createMapContext('map'); 可通过mapContext实现定制化需求。

Slot

Name | 说明 | 是否必传 --|:--:|:--: footer | 与useDefaultScrollView配合使用。如果useDefaultScrollView为true（默认），则由组件提供和管理scroll-view容器，footer插槽将插入到scroll-view里。如果useDefaultScrollView为false，则将整个footer插槽插入，scroll-view由使用方自己管理。或者插入另一个带有scroll-view容器的组件 | 否 footer-fixed | footer区域，如果有需要固定显示（不随scroll-view滚动）的内容，插入到此处 | 否

在小程序中使用

{
  "usingComponents": {
    "adc-map-marker": "@alipay/adc-map-marker/es/index"
  }
}

在 page.axml 中引用组件

<!-- 页面使用方式 -->
<adc-map-marker simpleMarkers="{{simpleMarkers}}"
  showSearchMap
  footer="{{footer}}"
  onMarkerTap="onMarkerTap"
  onSearchMap="onSearchMap"
  onFooterStatusChange="onStatusChange"
  onMoveToLocation="onMoveToLocation">
  <view slot="footer">
    Footer Content
  </view>
</adc-map-marker>

若要与adc-flat-list配合使用，详见demo示例。 若是使用自己的scroll-view，需要额外在onScroll事件中通知本组件。

onScroll(e) {
  // 与adc-map-marker组件配合
  // 将scroll事件发送过去
  const { $page } = this;
  const adcMapMarker = $page.components
    && $page.components.adcMapMarker;
  if (adcMapMarker) {
    adcMapMarker.onScroll(e);
  }
}

Badges

[![install size][install-size-image]][install-size-url]