Vue项目中应用天地图

最新推荐文章于 2024-08-20 10:49:35 发布

原创

最新推荐文章于 2024-08-20 10:49:35 发布 · 5.4k 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #街景地图

本文介绍了如何在Vue项目中引入和使用天地图，包括全局与按需引入地图JS库，创建DOM元素，添加标注点及信息窗口，以及实现地理编码功能。同时，注意到全局引入可能带来的性能损耗问题，并提出优化方案。

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

引入天地图 js

首先到天地图官网获取服务许可key；国家地理信息公共服务平台天地图

全局引入地图 js 库

在Vue项目的index.html 文件中，全局引入天地图js库

<body>
    <script src="http://api.tianditu.gov.cn/api?v=4.0&tk=申请的key" type="text/javascript"></script>
</body>

这种方法引入的地图 js，会导致项目的每一个组件都会加载该 js，尤其在不需要加载天地图的页面，会造成很大的性能损耗；而在首页不需要天地图时，天地图加载缓慢，会造成很长的白屏时间，因此需要优化一下引入地图 js 的方法；

创建dom元素并插入

在需要引入 js 的页面，创建script元素，设置 src 属性，并插入；这样就会只在该页面中引入天地图 js；

mounted() {
    let script = document.createElement('script')
    script.type = 'text/javascript'
    script.src = 'http://api.tianditu.gov.cn/api?v=4.0&tk=申请的key'
    document.body.appendChild(script)
},

应用天地图

<template>
    <di

最低0.47元/天解锁文章

200万优质内容无限畅学