Vue3腾讯地图返回marker总数量

Question

Vue3引入腾讯地图，并插入了几个标记点，如何把marker的总数量返回显示？

Answer 1

让阿豪来帮你解答，本回答参考chatgpt3.5编写提供，如果还有疑问可以评论或留言

问题：如何通过Vue3引入的腾讯地图，在添加标记点时获得marker的总数，然后将其返回并显示出来？ 回答：

1. 在Vue项目中引入腾讯地图SDK，可以通过以下方式：

<script type="text/javascript" src="//map.qq.com/api/js?v=2.exp&key=YOUR_KEY"></script>

其中，YOUR_KEY是你的腾讯地图API密钥。你可以在开发者中心申请和获取一个密钥。 2. 在组件中创建地图实例：

<template>
  <div id="map-container"></div>
</template>
<script>
export default {
  mounted() {
    const map = new qq.maps.Map(document.getElementById('map-container'), {
      center: new qq.maps.LatLng(39.916527, 116.397128),
      zoom: 13
    });
  }
}
</script>

在mounted生命周期函数中，创建了一个地图实例，并将其渲染到id为map-container的元素上。center和zoom分别设置地图的中心位置和缩放级别。 3. 在地图实例中添加标记点，并获得总数：

<template>
  <div id="map-container"></div>
  <div>Total markers: {{totalMarkers}}</div>
</template>
<script>
export default {
  data() {
    return {
      markers: [], // 存储标记点的数组
      totalMarkers: 0 // 标记点的总数
    }
  },
  mounted() {
    const map = new qq.maps.Map(document.getElementById('map-container'), {
      center: new qq.maps.LatLng(39.916527, 116.397128),
      zoom: 13
    });
    // 添加标记点
    const marker1 = new qq.maps.Marker({
      position: new qq.maps.LatLng(39.913906, 116.391278),
      map: map
    });
    this.markers.push(marker1);
    const marker2 = new qq.maps.Marker({
      position: new qq.maps.LatLng(39.904211, 116.407395),
      map: map
    });
    this.markers.push(marker2);
    const marker3 = new qq.maps.Marker({
      position: new qq.maps.LatLng(39.925710, 116.384758),
      map: map
    });
    this.markers.push(marker3);
    // 获取标记点的总数
    this.totalMarkers = this.markers.length;
  }
}
</script>

在mounted生命周期函数中，创建地图实例，并添加三个标记点，将它们存储在markers数组中。然后，通过markers.length获取数组长度，即标记点总数，并赋值给totalMarkers，用于显示在模板中。