admin管理员组

文章数量:1530516

前言：

        vue3+腾讯地图

实现效果：

官方：

        控制台入口（申请key）：点我

        api:点我

实现步骤：

1、官网申请腾讯的key

2、在public/index.html里面添加


<script src="https://map.qq/api/gljs?v=1.exp&key=你申请的key"></script>

3、新建map.vue文件

<template>
  <div class="map" id="tx_map_d"></div>
</template>

<script>
  import { defineComponent,nextTick,onMounted } from 'vue'
  export default defineComponent({
    setup(){
      onMounted(() => {
        nextTick(()=>{
          initMap()
        })
      })
      const initMap = () => {
        //定义地图中心点坐标
        var center = new TMap.LatLng(39.984120, 116.307484)
        //定义map变量，调用 TMap.Map() 构造函数创建地图
        var map = new TMap.Map(document.getElementById('tx_map_d'), {
          center: center,//设置地图中心点坐标
          zoom: 17.2,   //设置地图缩放级别
          pitch: 43.5,  //设置俯仰角
          rotation: 45    //设置地图旋转角度
        });

        // 创建点聚合实例
        var markerCluster = new TMap.MarkerCluster({
          id: 'cluster',
          map: map,
          enableDefaultStyle: true, // 启用默认样式
          minimumClusterSize: 2, // 形成聚合簇的最小个数
          geometries: [{ // 点数组
            position: new TMap.LatLng(39.953416, 116.480945)
          },
            {
              position: new TMap.LatLng(39.984104, 116.407503)
            },
            {
              position: new TMap.LatLng(39.908802, 116.497502)
            },
            {
              position: new TMap.LatLng(40.040417, 116.373514)
            },
            {
              position: new TMap.LatLng(39.953416, 116.380945)
            },
            {
              position: new TMap.LatLng(39.984104, 116.307503)
            },
            {
              position: new TMap.LatLng(39.908802, 116.397502)
            },
            {
              position: new TMap.LatLng(40.040417, 116.273514)
            },
          ],
          zoomOnClick: true, // 点击簇时放大至簇内点分离
          gridSize: 60, // 聚合算法的可聚合距离
          averageCenter: false, // 每个聚和簇的中心是否应该是聚类中所有标记的平均值
          maxZoom: 10 // 采用聚合策略的最大缩放级别
        });

      }
      return {

      }
    }
  })

</script>

<style lang='scss' scoped>
  .map{
    width: 100%;
    height: 100%;
  }
</style>

4、我的腾讯key,最好用你自己的

CCNBZ-MSRLU-SYSVF-223PZ-BBMTT-V6BDA

本文标签： 腾讯地图

版权声明：本文标题：vue3+腾讯地图 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/xitong/1726067815a1054084.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。