1.0.8 • Published 3 years ago
@mas.io/adc-map-marker v1.0.8
安装
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
