map组件如何展示marker的callout气泡,map容器使用技巧,小程序map marker真机不显示-ESG跨境

map组件如何展示marker的callout气泡,map容器使用技巧,小程序map marker真机不显示

地图组件如何显示标记的标注气泡

场景描述

标记可以通过频繁点击或显示来显示文本，以描述与相应标记相关的信息。

实现思路

以下示例显示如何在相应的标记上显示普通文本气泡。

由于文本气泡的宽度和高度不能自定义，即气泡根据文本内容来适应宽度和高度，这意味着textAlign属性。只有当文本内容包含换行符(\n)时，才能有直观的视觉效果。

解决方法

代码如下:

模板

差异

地图

style = width:{ { width } }；高度:{{height}}

scale={{scale}}

markers={{markers}}

/地图

/div

/模板

脚本

const COORDTYPE = wgs84

常量标记路径= /Common/marker.png

北京WGS = {

纬度:39.9073728469，

经度:116.3913445961，

坐标类型:坐标类型

}

导出默认值{

私人:{

比例尺:17，

标记:[

{

宽度:100%，

身高:50%，

纬度:BEIJINGWGS.latitude

经度:BEIJINGWGS .经度，

coord type:BEI JING WGS . coord type，

iconPath: MARKERPATH

宽度:100px，

标注:{

内容:这里是北京，

填充:20px 5px 20px 5px，

边框半径:20px，

textAlign: left，

显示:始终

}

}

]

}

}

/脚本

更多参考

地图组件:

https://developer . Huawei . com/consumer/cn/doc/development/quick appReferences/quick appcomponentmap

特别声明：以上文章内容仅代表作者本人观点，不代表ESG跨境电商观点或立场。如有关于作品内容、版权或其它问题请于作品发表后的30日内与ESG跨境电商联系。