vue3 + 腾讯地图开发MultiMarker不显示为什么
可能有以下几种情况:
- 没有正确引入腾讯地图的API,需要在HTML文件中引入API:
<script src="https://map.qq.com/api/js?v=2.exp&key=您申请的key值"></script>
- MultiMarker的数据格式不正确,需要保证数据格式如下:
[
{
id: '1',
position: new qq.maps.LatLng(39.938546, 116.276776),
icon: new qq.maps.MarkerImage(
'https://lbs.qq.com/javascript_v2/img/center.gif',
new qq.maps.Size(20, 20)
),
anchor: new qq.maps.Point(10, 10),
zIndex: 1
},
{
id: '2',
position: new qq.maps.LatLng(39.908546, 116.296776),
icon: new qq.maps.MarkerImage(
'https://lbs.qq.com/javascript_v2/img/center.gif',
new qq.maps.Size(20, 20)
),
anchor: new qq.maps.Point(10, 10),
zIndex: 2
}
]
其中,id为标记物的唯一标识符,position为标记物的经纬度位置,icon为标记物的图标,anchor为标记物的锚点位置,zIndex为标记物的层级。
-
MultiMarker的容器没有设置高度或宽度,需要保证容器有足够的空间来显示标记物。
-
MultiMarker的实例化代码有问题,需要按照以下方式进行实例化:
const multiMarker = new qq.maps.MultiMarker({
map: map,
markers: markers,
style: {
width: '32px',
height: '32px',
anchor: new qq.maps.Point(16, 16)
}
});
其中,map为腾讯地图实例,markers为标记物的数据数组,style为标记物的样式设置。
如果以上几种情况都已经排除,建议检查浏览器的控制台输出,查看是否有报错信息。
原文地址: https://www.cveoy.top/t/topic/HFt 著作权归作者所有。请勿转载和采集!