基于VUE3集成天地图

原创

已于 2024-12-12 10:56:29 修改 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js

于 2024-11-28 14:32:30 首次发布

1.在项目中添加了天地图的JavaScript API。
官方参考：
申请天地图key地址。
天地图API地址。

<!-- 在你的index.html或者相应的模板文件中 -->
<script src="http://api.tianditu.gov.cn/api?v=4.0&tk==你的天地图key"></script>

2.创建一个Vue 3组件，并在组件中添加地图的初始化逻辑。

<template>
  <div class="tiandituMap">
    <div ref="mapContainer" class="map-container"></div>
  </div>
</template>
<script lang='ts' setup>
    const mapContainer = ref(null);
    onMounted(() => {
   
   
        initMap()
    });
    let zoom = ref(12) //层级
    let allPoints: any