vue中使用天地图api

最新推荐文章于 2025-05-08 10:34:34 发布

ctCheng

最新推荐文章于 2025-05-08 10:34:34 发布

阅读量1.8k

点赞数 2

分类专栏：天地图文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/ctCheng/article/details/121567162

版权

如何在vue中使用天地图绘制地图

- 参考天地图官方demo去写就好了
- 具体使用的实例

参考天地图官方demo去写就好了

链接: http://lbs.tianditu.gov.cn/api/js4.0/examples.html.

具体使用的实例

正常的话把里面的坐标、秘钥和图片地址换一下就直接可以用，我对里面的一部分不适合展示的东西做了删减，没有专门去测试，不过应该也没什么大问题，有问题照着报错改就好啦，我估计99%是没问题的，我就不测试了，哈哈哈

//我用的是vue-cli 4.0的，别的应该也差不多，在public里找到index.html页面
//加入标签
<script src="http://api.tianditu.gov.cn/api?v=4.0&tk=你申请的秘钥	" type="text/javascript"></script>

//在你要绘制地图的页面引入
const arr1 = [{
   lat:123.123,lon:46.46}] //写入坐标
const T = window.T;
var map3D="";
export default {
   
	data() {
   
		return {
   
			color: ['#ef4464', '#fad259', '#d22e8d ', '#03dee0', '#d05c7c', '#bb60b2', '#628cee', '#f47a75', '#009db2'
			]
			
		}
	},
	props: {
   
		bounds: {
   
			type: Array,
			default: [
				{
   
					coordinate:

最低0.47元/天解锁文章