腾讯地图选点组件组件显示错乱问题排查

本文介绍了一次使用腾讯地图H5选点组件时遇到的问题:地图组件内容错乱。经过排查发现这一现象是由浏览器缩放导致的,并分享了解决思路。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在h5端引入腾讯地图选点组件地图组件 | 腾讯位置服务,按文档采用第一种iframe方式引入,之前一直是好的,突然有一天组件显示内容错乱了,如下图:

排查许久,发现是浏览器缩放导致。 

要在Vue中通过iframe调用腾讯地图地图选点组件,并实现反显地点,可以按照以下步骤进行: 1. 在Vue组件中添加一个iframe元素,并设置其src属性为腾讯地图地图选点组件的URL。同时,给iframe添加一个id,以便在后面的代码中可以通过id获取到iframe元素。 ``` <template> <div> <iframe id="map-iframe" src="https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=YOUR_KEY"></iframe> </div> </template> ``` 2. 在Vue组件的mounted生命周期钩子中,给iframe添加一个load事件的监听器。当iframe加载完成后,通过postMessage向iframe发送一个消息,告诉它需要反显地点。 ``` <script> export default { mounted() { const iframe = document.getElementById("map-iframe"); iframe.addEventListener("load", () => { const message = { type: "show", data: { latLng: { lat: 39.916527, lng: 116.397128 } } }; iframe.contentWindow.postMessage(message, "*"); }); window.addEventListener("message", event => { if (event.origin !== "https://apis.map.qq.com") { return; } if (event.data.type === "location") { const location = event.data.data; console.log(location); } }); } }; </script> ``` 3. 在iframe中通过window.addEventListener监听父窗口发送的postMessage消息。当收到show类型的消息后,根据消息中的经纬度信息,在地图上显示一个标记点,并通过Geocoder逆地址解析功能获取反显地址信息。当用户点击标记点时,通过postMessage向父窗口发送一个消息,告诉它选中的地点信息。 ``` <script> window.addEventListener("message", event => { if (event.origin !== "https://apis.map.qq.com") { return; } if (event.data.type === "show") { const map = new qq.maps.Map(document.getElementById("map-container"), { center: new qq.maps.LatLng(event.data.data.latLng.lat, event.data.data.latLng.lng), zoom: 13 }); const marker = new qq.maps.Marker({ position: new qq.maps.LatLng(event.data.data.latLng.lat, event.data.data.latLng.lng), map: map }); const reverseGeocoder = new qq.maps.Geocoder({ complete: result => { if (result.detail.addressComponents) { const address = result.detail.addressComponents; const location = { city: address.city, district: address.district, street: address.street, latLng: event.data.data.latLng }; window.parent.postMessage({ type: "location", data: location }, "*"); } } }); reverseGeocoder.getAddress(new qq.maps.LatLng(event.data.data.latLng.lat, event.data.data.latLng.lng)); qq.maps.event.addListener(marker, "click", event => { const location = { city: marker.city, district: marker.district, street: marker.street, latLng: event.latLng }; window.parent.postMessage({ type: "location", data: location }, "*"); }); } }); </script> ``` 4. 在Vue组件的代码中,监听窗口的message事件,并根据接收到的消息类型进行处理。当收到location类型的消息时,获取选中的地点信息,并进行后续处理。 ``` <script> export default { mounted() { const iframe = document.getElementById("map-iframe"); iframe.addEventListener("load", () => { const message = { type: "show", data: { latLng: { lat: 39.916527, lng: 116.397128 } } }; iframe.contentWindow.postMessage(message, "*"); }); window.addEventListener("message", event => { if (event.origin !== "https://apis.map.qq.com") { return; } if (event.data.type === "location") { const location = event.data.data; console.log(location); } }); } }; </script> ``` 通过以上步骤,就可以在Vue中通过iframe调用腾讯地图地图选点组件,并实现反显地点的功能了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值