Vue项目中应用天地图

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

saltlike

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

阅读量5.2k

点赞数 4

分类专栏：总结记录文章标签： vue.js 前端街景地图

本文链接：https://blog.csdn.net/saltlike/article/details/121787614

版权

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

摘要由CSDN通过智能技术生成

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

在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 的方法；

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

mounted() {
    let script = document.createElement('script')
    script.type = 'text/javascript'
    script.src = 'http://api.tianditu.gov.cn/api?v=

关注

专栏目录