【微信小程序】 map 组件 callout 自定义气泡（实实在在的讲解）

自定义气泡为什么出不来呢？
主要注意以下问题：

首先这里的 customCallout 是作为一个属性存在的，那么自然要在 WXML 中有所体现，主要体现在 markers 对象中的数据结构。

需要保证 markers 对象中有如下字段

customCallout: {anchorX: 0,anchorY: 0,display: "ALWAYS"}

比如我自己开发过程中使用的对象结构：

 marker = {id: i,_id: "",iconPath: '/images/Marker3_Activated@3x.png',latitude: "",longitude: "",width: 30,height: 30,customCallout: {anchorX: 0,anchorY: 0,display: "ALWAYS"}}

需要在 WXML 添加对应的组件：

<map><cover-view slot="callout"><cover-view marker-id="1"></cover-view><cover-view marker-id="2"></cover-view></cover-view>
</map>

这里注意使用 cover-view 然后配置 marker-id

当然也可以用数组形式配置

 <block wx:for="{{customCalloutMarkerIds}}" wx:key="*this"><cover-view class="customCallout" marker-id="{{item}}"><cover-view class="content">test</cover-view></cover-view></block>

数组中存储着所有需要显示的 markers 的 id

注意一定是 number 类型的 id 哈

2020年9月3日

【微信小程序】 map 组件 callout 自定义气泡（实实在在的讲解）相关推荐

微信小程序map组件callout与label简单用法
callout和label的效果图 callout初始位置在标记上方 label初始位置在标记右下方 data:{marker:[{//气泡labellabel:{content: '预约', //文 ...
微信小程序map组件地图定位当前位置
小程序map组件的应用方式:简单版 wxml: <map id="map" latitude="{{latitude}}" longitude=" ...
微信小程序--map组件视图无法更新的问题
在使用微信小程序 map组件的时候,会有一个小问题.当出现markers是一个数组,在切换数据的时候,页面会残留上次留下来的markers. 在js中使用setData更新markers数据后,地图上 ...
使用uniapp 开发微信小程序map组件在开发过程中遇到的问题
** 使用uniapp 开发微信小程序map组件在开发过程中遇到的问题 [菜鸟记录] ** 发现的问题: 如果给map设置初始化scale的话,手指缩放地图后,点击按钮让地图再次回到和初始化一样的 s ...
微信小程序----map组件实现检索【定位位置】周边的POI
WXRUI体验二维码如果文章对你有帮助的话,请打开微信扫一下二维码,点击一下广告,支持一下作者!谢谢! 声明 bug: 页面顶部分类[汽车服务.汽车销售等]列表和页脚的详细地址在真机测试是会出现不显 ...
微信小程序map组件查找周围各种场所(通过腾讯位置服务)
废话不多说,直接写咋实现主要用到了腾讯位置服务里面的微信小程序JavaScript SDK,你得先申请一个开发者密钥,这里就不多说了实现效果如下,这里面是搜索周围的餐厅首先wxml代码 < ...
微信小程序----map组件实现（获取定位城市天气或者指定城市天气数据）
效果图实现原理采用高德地图微信小程序开发API(getWeather),如果 city 属性的值为空(或者没有city属性),默认返回定位位置的天气数据:如果 city 不为空,则返回 city ...
微信小程序map组件点聚合初次使用的坑
有个项目一直有个功能,地图上标注车站,但是点过多时需要点聚合功能,map组件和腾讯地图小程序端并不能实现这个功能,除了webview,好像没有别的办法.终于9月份官方更新了聚合功能,,, 看文档使用方 ...
微信小程序map组件点击不同的marker跳转到不同的页面
"wxml页面" 在map组件中添加触发事件:bindmarkertap="markertap" "js页面" 在data中,为marker ...

【微信小程序】 map 组件 callout 自定义气泡（实实在在的讲解）

【微信小程序】 map 组件 callout 自定义气泡（实实在在的讲解）相关推荐

最新文章

热门文章

【微信小程序】 map 组件 callout 自定义气泡 （实实在在的讲解）

【微信小程序】 map 组件 callout 自定义气泡 （实实在在的讲解）相关推荐

最新文章

热门文章

【微信小程序】 map 组件 callout 自定义气泡（实实在在的讲解）

【微信小程序】 map 组件 callout 自定义气泡（实实在在的讲解）相关推荐