Vue项目使用天地图的方法（Vue引入天地图，创建地图实例）

最新推荐文章于 2025-02-25 15:53:40 发布

小丶鹿

最新推荐文章于 2025-02-25 15:53:40 发布

阅读量3.3k

点赞数 2

分类专栏： vue加天地图文章标签： vue

本文链接：https://blog.youkuaiyun.com/qq_40748812/article/details/110826063

版权

本文介绍了如何在Vue项目中引入并使用天地图，首先在index.html添加天地图API JS文件，然后在Vue组件中实现地图功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近项目需要用到天地图，要引入到Vue项目中，鉴于官网没有相关的说明文档，在这里我记录一下我所使用的引入方法，可能不是很好，希望有更好的方法大佬能教一下我。

第一步，在Vue项目文件夹public下的index.html入口文件中加入天地图API JS文件。
引入天地图JavaScript API文件
```
<script src="http://api.tianditu.gov.cn/api?v=4.0&tk=您的密钥" type="text/javascript"></script>
```

创建VUE文件，实装第一个页面

<template>
  <div>
    <header>天地图</header>
    <div id="yzMap" style="position: absolute; width: 85%; height: 80%"></div>
  </div>
</template>
<script>
export default {
  name: 'tianditu',
  data() {
    return {
    };
  },
  mounted: () => {
    const a = new Promise((resolve, reject) => {
      console.log(reject);
      // 如果已加载直接返回
      if (window.T) {
        console.log('地图脚本初始化成功...');
        resolve(window.T);
      }
    });
    // 第一种方式显示

最低0.47元/天解锁文章