uniapp 谷歌地图 nvue

问题集合

安卓App端,开启点聚合

  1. 会导致@markertap和@labeltap的点击事件失效(未解决)
  2. 标记点Label属性失效(未解决)
html 复制代码
<view class="content">
		<map id="map" class="map" :show-location="true" :latitude="latitude" :longitude="longitude"
			@markertap="markertap" @labeltap="labeltap"></map>
	</view>
javascript 复制代码
const img = '/static/logo.png';

	export default {
		data() {
			return {
				latitude: 32.715738,
				longitude: -117.1610838,
			}
		},
		onReady() {
			this._mapContext = uni.createMapContext("map", this);
			// this.clusterEvent()
			this.addMarkers();
		},
		methods: {
			// 开启聚合
			clusterEvent(){
				// 仅调用初始化,才会触发 on.("markerClusterCreate", (e) => {})
				this._mapContext.initMarkerCluster({
					enableDefaultStyle: false,
					zoomOnClick: true,
					gridSize: 60,
					complete(res) {
						console.log('initMarkerCluster', res)
					}
				});
				// 缩放或拖动导致新的聚合簇产生时触发,仅返回新创建的聚合簇信息。
				this._mapContext.on("markerClusterCreate", (e) => {
					// console.log("markerClusterCreate", e);
				});
				// 聚合点击事件
				this._mapContext.on("markerClusterClick", (e) => {
					// console.log("markerClusterClick", e);
				})
			},
			// 添加标记点
			addMarkers() {
				const positions = [{
					latitude: 32.715738,
					longitude: -117.1610838,
				}, {
					latitude: 32.715180,
					longitude: -117.1610838,
				}, {
					latitude: 32.715180,
					longitude: -117.16217638,
				}]

				const markers = []

				positions.forEach((p, i) => {
					markers.push(
						Object.assign({}, {
							id: i + 1, // markertap点击事件必须指定id
							iconPath: img,
							width: 50,
							height: 50,
							// joinCluster: true, // 指定了该参数才会参与聚合
							label: { // 点聚合开启,label失效
								width: 50,
								height: 30,
								borderWidth: 1,
								borderRadius: 10,
								fontSize: 14,
								color: '#fff',
								textAlign: 'center',
								bgColor: '#1bff18',
								content: `label ${i + 1}`
							}
						}, p)
					)
				})
				this._mapContext.addMarkers({
					markers,
					clear: false,
					complete(res) {
						console.log('addMarkers', res)
					}
				})
			},
			// 标记点点击事件(注:安卓app,点聚合开启,标记点点击失效)
			markertap(evt) {
				console.log("Marker点击", evt);
			},
			// Label标签点击事件(注:安卓app,点聚合开启,Label标签点击失效)
			labeltap(evt) {
				console.log("Label点击", evt);
			},
		}
	}
相关推荐
喜欢的名字被抢了6 小时前
写-Chrome-扩展时踩过的那些-MV3-的坑
前端·chrome
java1234_小锋6 小时前
【免费】基于Spark实时电商用户行为分析与预测(Java版本+可视化大屏+Kafka+SpringBoot+Vue3) 锋哥原创出品,必属精品
java·spark·kafka·实时电商用户行为分析与预测系统
网安老伯6 小时前
网络安全基础要点知识介绍(非常详细),零基础入门到精通,看这一篇就够了
运维·前端·网络协议·web安全·网络安全·职场和发展
keyipatience6 小时前
日志和线程池
java·开发语言
wuqingshun3141596 小时前
springBoot是如何通过main方法启动web项目的?
前端·spring boot·后端
xxwl5856 小时前
HTML 小总结:从骨架到枝叶,系统掌握网页结构
前端·html
●VON6 小时前
鸿蒙 PC Markdown 编辑器 Bridge 协议:原生外壳与 Web 内核的状态同步
前端·华为·编辑器·harmonyos·鸿蒙
MrDJun6 小时前
分享一款免费实用的网页变动监控工具:PageWatch.tech
前端·javascript·vue.js
米码收割机6 小时前
【web】邻里悦站—社区便民服务平【独一无二】(源码+说明文档)
前端
程序员爱钓鱼6 小时前
Rust Option 详解:安全处理“可能存在,也可能不存在”的值
前端·后端·rust