当前位置:首页 > 新闻动态 > 网站文章

marker 上的自定义气泡 customCallout

来源: 浏览:149 时间:2023-08-04

map

基础库 1.0.0 开始支持,低版本需做兼容处理。

地图(v2.7.0 起支持同层渲染)。相关api wx.createMapContext。

subkeylayer-style

示例小程序

e.detail = {markerId}e.detail = {markerId}e.detail = {controlId}e.detail = {markerId}e.detail = {name, longitude, latitude}e.detail = {longitude, latitude}

regionchange 返回值

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

2.8.0 起 begin 阶段返回 causedBy,有效值为 gesture(手势触发) & update(接口触发)

2.3.0 起 end 阶段返回 causedBy,有效值为 drag(拖动导致)、scale(缩放导致)、update(调用更新接口导致)。

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

setting

rotateskewsetDatasettting
  1. // 默认值
  2. const setting = {
  3. skew: 0,
  4. rotate: 0,
  5. showLocation: false,
  6. showScale: false,
  7. subKey: '',
  8. layerStyle: 1,
  9. enableZoom: true,
  10. enableScroll: true,
  11. enableRotate: false,
  12. showCompass: false,
  13. enable3D: false,
  14. enableOverlooking: false,
  15. enableSatellite: false,
  16. enableTraffic: false,
  17. }
  18. this.setData({
  19. // 仅设置的属性会生效,其它的不受影响
  20. setting: {
  21. enable3D: true,
  22. enableTraffic: true
  23. }
  24. })

marker

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

属性说明类型必填备注最低版本
id标记点 idnumbermarker 点击事件回调会返回此 id。建议为每个 marker 设置上 number 类型 id,保证更新 marker 时有更好的性能。
clusterId聚合簇的 idNumber自定义点聚合簇效果时使用
joinCluster是否参与点聚合Boolean默认不参与点聚合
latitude纬度number浮点数,范围 -90 ~ 90
longitude经度number浮点数,范围 -180 ~ 180
title标注点名string点击时显示,callout存在时将被忽略
zIndex显示层级number
iconPath显示的图标string项目目录下的图片路径,支持网络路径、本地路径、代码包路径(2.3.0)
rotate旋转角度number顺时针旋转的角度,范围 0 ~ 360,默认为 0
alpha标注的透明度number默认 1,无透明,范围 0 ~ 1
width标注图标宽度number/string默认为图片实际宽度
height标注图标高度number/string默认为图片实际高度
callout标记点上方的气泡窗口Object支持的属性见下表,可识别换行符。
customCallout自定义气泡窗口Object支持的属性见下表
label为标记点旁边增加标签Object支持的属性见下表,可识别换行符。
anchor经纬度在标注图标的锚点,默认底边中点Object{x, y},x 表示横向(0-1),y 表示竖向(0-1)。{x: .5, y: 1} 表示底边中点
aria-label无障碍访问,(属性)元素的额外描述string

marker 上的气泡 callout

属性说明类型最低版本
content文本string
color文本颜色string
fontSize文字大小number
borderRadius边框圆角number
borderWidth边框宽度number
borderColor边框颜色string
bgColor背景色string
padding文本边缘留白number
display‘BYCLICK’:点击显示; ‘ALWAYS’:常显string
textAlign文本对齐方式。有效值: left, right, centerstring
anchorX横向偏移量,向右为正数number
anchorY纵向偏移量,向下为正数number

marker 上的自定义气泡 customCallout

customCalloutcallouttitlecover-view
属性说明类型最低版本
display‘BYCLICK’:点击显示; ‘ALWAYS’:常显string
anchorX横向偏移量,向右为正数number
anchorY纵向偏移量,向下为正数number
mapcalloutslotcover-viewmarkermarkercover-viewcallout

marker 上的气泡 label

属性说明类型最低版本
content文本string
color文本颜色string
fontSize文字大小number
xlabel的坐标(废弃)number
ylabel的坐标(废弃)number
anchorXlabel的坐标,原点是 marker 对应的经纬度number
anchorYlabel的坐标,原点是 marker 对应的经纬度number
borderWidth边框宽度number
borderColor边框颜色string
borderRadius边框圆角number
bgColor背景色string
padding文本边缘留白number
textAlign文本对齐方式。有效值: left, right, centerstring

polyline

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

属性说明类型必填备注最低版本
points经纬度数组array[{latitude: 0, longitude: 0}]
color线的颜色string十六进制
colorList彩虹线array存在时忽略 color 值
width线的宽度number
dottedLine是否虚线boolean默认 false
arrowLine带箭头的线boolean默认 false,开发者工具暂不支持该属性
arrowIconPath更换箭头图标string在 arrowLine 为 true 时生效
borderColor线的边框颜色string
borderWidth线的厚度number
level压盖关系string默认为 abovelabels
level
说明最低版本
abovelabels显示在所有 POI 之上
abovebuildings显示在楼块之上 POI 之下
aboveroads显示在道路之上楼块之下

polygon

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

属性说明类型必填备注最低版本
points经纬度数组array[{latitude: 0, longitude: 0}]
strokeWidth描边的宽度number
strokeColor描边的颜色string十六进制
fillColor填充颜色string十六进制
zIndex设置多边形Z轴数值number
level压盖关系string默认为 abovelabels

circle

在地图上显示圆

属性说明类型必填备注
latitude纬度number浮点数,范围 -90 ~ 90
longitude经度number浮点数,范围 -180 ~ 180
color描边的颜色string十六进制
fillColor填充颜色string十六进制
radius半径number
strokeWidth描边的宽度number
level压盖关系string默认为 abovelabels

control

在地图上显示控件,控件不随着地图移动。即将废弃,请使用 cover-view

属性说明类型必填备注
id控件idnumber在控件点击事件回调会返回此id
position控件在地图的位置object控件相对地图位置
iconPath显示的图标string项目目录下的图片路径,支持本地路径、代码包路径
clickable是否可点击boolean默认不可点击

position

属性说明类型必填备注
left距离地图的左边界多远number默认为0
top距离地图的上边界多远number默认为0
width控件宽度number默认为图片宽度
height控件高度number默认为图片高度

bindregionchange 返回值

属性说明类型备注
type视野变化开始、结束时触发string视野变化开始为begin,结束为end
causedBy导致视野变化的原因string拖动地图导致(drag)、缩放导致(scale)、调用接口导致(update)

Bug & Tip

tiptiptiptipmaptypegcj02tip

比例尺

scale34567891011
比例1000km500km200km100km50km50km20km10km5km
scale121314151617181920
比例2km1km500m200m100m50m50m20m10m

示例代码

点聚合

当地图上需要展示的标记点 marker 过多时,可能会导致界面上 marker 出现压盖,展示不全,并导致整体性能变差。针对此类问题,推出点聚合能力。

使用流程如下:

示例代码

需注意的是:1. 地图上的 marker 分为普通的 marker 与参与聚合的 marker,参与聚合时需指定属性 joinCluster 为 true; 2. 自定义聚合簇样式时,同样通过 MapContext.addMarkers 进行绘制,此时需携带 clusterId。

地址 · ADDRESS

地址:建邺区新城科技园嘉陵江东街18号2层

邮箱:309474043@qq.Com

点击查看更多案例

联系 · CALL TEL

400-8793-956

售后专线:025-65016872

业务QQ:309474043    售后QQ:1850555641

©南京安优网络科技有限公司 版权所有   苏ICP备12071769号-4  网站地图