vue2.x 天地图整合

最新推荐文章于 2025-03-05 14:04:59 发布

(´ꑣ｀)走啊，去学习

最新推荐文章于 2025-03-05 14:04:59 发布

阅读量748

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.youkuaiyun.com/weixin_44180190/article/details/125845491

版权

本文介绍如何在Vue2.x项目中整合天地图，包括从官网获取秘钥，将秘钥添加到index.html文件，以及后续的正文内容，详细阐述整合步骤。

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

vue3.x 将变量转换成对应值即可

首先先去官网获取你的秘钥

然后在你的 index.html 文件内添加

    <!-- 引入天地图在线 API -->
    <script
      src="http://api.tianditu.gov.cn/api?v=4.0&tk=你的天地图秘钥"
      type="text/javascript"
    ></script>

接下来是正文

<template>
  <div id="divmap"></div>
</template>

<script>
export default {
   
  name: "V2TdMap",

  props: {
   
    list: {
   
      type: Array,
      default: () => [],
    },
    showCarCode: {
   
      type: Boolean,
      default: () => true,
    },
  },

  data() {
   
    return {
   
      map: null,
      _T: null,
      carImg1: require("@/assets/imgs/cars/工程车 (default).png"),
      carImg2: require("@/assets/imgs/cars/工程车 (done).png"),
      carImg3: require("@/assets/imgs/cars/工程车 (err).png"),
    };
  },

  watch: {
   
    list() {
   
      this.clearIcon();
      this.point