可能有以下几种情况:

  1. 没有正确引入腾讯地图的API,需要在HTML文件中引入API:
<script src="https://map.qq.com/api/js?v=2.exp&key=您申请的key值"></script>
  1. 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为标记物的层级。

  1. MultiMarker的容器没有设置高度或宽度,需要保证容器有足够的空间来显示标记物。

  2. 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为标记物的样式设置。

如果以上几种情况都已经排除,建议检查浏览器的控制台输出,查看是否有报错信息。

vue3 + 腾讯地图开发MultiMarker不显示为什么

原文地址: https://www.cveoy.top/t/topic/HFt 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录