uni-app中,map组件marker图标在手机端第二次进入不显示问题

uni-app中,map组件marker图标在手机端第二次进入不显示问题

<template>
	<view>
		<map name="map1" id="map1" ref="map1" :longitude="longitude" :latitude="latitude" :markers="markers"></map>
	</view>
</template>
export default {
	props:['gdx','gdy'],
	data() {
		return {
			longitude:'',
			latitude:'',
			markers:[]
		}
	},
	mounted(){
		// #ifdef APP-PLUS
			this.longitude = this.gdx;
			this.latitude = this.gdy;
			
			let marker = {
				id:"1",
				longitude:this.gdx,
				latitude:this.gdy,
				iconPath:'../../static/logo.png'
			}
			
			this.markers.push(marker);
	},
}

每次进入地图后坐标都是从后台获取的,所以图标每次都需要重新渲染,代码中的markers是数组每次都需要清空在重新添加坐标对象。故,只需要在代码mounted函数中的开头位置加上

this.markers=[];
uni-app框架,`map`组件用于在地图上展示标记(Markers),而`callout`方法通常用于创建一个弹出框(Callout),当用户点击标记时显示额外的信息。如果你想要在uni-app使用`callout`功能,你可以按照以下步骤操作: 1. 首先,在`<view>`标签内,你需要添加一个`map`组件,并设置好地图的基础配置,如心位置、缩放级别等。 ```html <map :center="center" :zoom="zoom" ref="map"></map> ``` 2. 定义`markers`数组,包含每个标记的位置以及需要显示的`callout`内容。每个标记应该有一个回调函数,比如`onMarkerClick`,用于触发`callout`的显示。 ```javascript data() { return { center: { latitude: 39.9042, longitude: 116.4074 }, zoom: 15, markers: [ { name: 'Marker 1', position: { latitude: 39.91, longitude: 116.41 }, callout: '<div>这是标记1的详细信息</div>', onMarkerClick: this.showCallout, } // 添加其他标记... ] }; }, methods: { showCallout(e) { const map = this.$refs.map; if (e.marker) { map.callout.open(e.marker, e.detail); } else { console.error('No marker found'); } } } ``` 3. 在`showCallout`方法,通过`$refs`获取到地图实例,然后调用`open`方法,传入需要显示callout的标记和具体的内容数据。 当你在地图上点击某个标记时,对应的callout内容就会弹出来。注意检查是否设置了`onMarkerClick`事件处理器,并确保`this.$refs.map`引用了正确的地图组件实例。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值