uni-app app引入天地图简单代码示例

 更新时间:2024年02月02日 10:44:11   作者:qq_28761593  
uni-app是一种基于Vue.js的跨平台开发框架,允许开发者使用统一的代码编写多端应用,这篇文章主要给大家介绍了关于uni-app app引入天地图的相关资料,需要的朋友可以参考下

话不多说代码来了

<template>
	<view>
		<div class="mapBox" style="width: 100%; height: 100vh;background: #ddc0c0;" id="mapId" >
			
		</div>
	</view>
</template>
<script module="test" lang="renderjs">
	var map
	export default {
		created() {
			const charset = 'utf-8'
			const script = document.createElement('script')
			    script.setAttribute('type','text/javascript')
			    script.setAttribute('charset',charset)
			    script.setAttribute('src','http://api.tianditu.gov.cn/api?v=4.0&tk=xxxxxxxxxxxxxxxxxxxxxxxxxx')
				document.getElementsByTagName('head')[0].appendChild(script)
			setTimeout(() => {
			        this.initMap();
			}, 500)
		},
		methods: {
		    //初始化地图
		    initMap() {
				const a = new Promise((resolve, reject) => {
					if (window.T) {
						console.log('地图脚本初始化成功...');
						resolve(window.T);
					}
				});
				map = new window.T.Map('mapId');
				map.centerAndZoom(new window.T.LngLat( 102.682491, 25.051102), [12]);
				map.setMapType(window.TMAP_HYBRID_MAP); // 设置地图位地星混合图层
		    },
		}
	}
</script>

重点:

1.module=“test” lang=“renderjs” 必须加上,否则报Error in created hook: "TypeError: Cannot read property ‘createElement’ of undefined,TypeError: Cannot read property ‘createElement’ of undefined错误。加上后手机浏览器也可以使用,目前没打包,不知道打包会不会出错。

2.你天地图申请的key

目前存在的问题:

1.一根手指头没法滑动地图,需要两根筷子

2.会出现:Uncaught TypeError: Cannot read property ‘x’ of undefined at http://api.tianditu.gov.cn/api?v=4.0&tk=xxxxxxxxxxx

3.等遇到在补充八哈

结果:

在这里插入图片描述

补充一下:数据交互有的没法在两个之间进行,不过可以借助vuex和监听来实现。

总结

到此这篇关于uni-app app引入天地图的文章就介绍到这了,更多相关uni-app app引入天地图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 使用Js让Html中特殊字符不被转义

    使用Js让Html中特殊字符不被转义

    怎么让<textarea></textarea>之间包含的文本原封不动的显示出来呢?下面小编就为大家介绍一下具体的实现方法吧
    2013-11-11
  • JavaScript基础知识之方法汇总结

    JavaScript基础知识之方法汇总结

    本文给大家分享了javascript基础知识,包括数组的方法,函数的方法,数字的方法,对象的方法,字符串的方法,常规方法,正则表达式方法,本文介绍的非常详细,具有参考价值特此分享供大家参考
    2016-01-01
  • jquery插件bootstrapValidator数据验证详解

    jquery插件bootstrapValidator数据验证详解

    这篇文章主要为大家详细介绍了jquery插件bootstrapValidator数据验证使用教程,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-11-11
  • 详解JS如何判断对象上是否存在某个属性

    详解JS如何判断对象上是否存在某个属性

    判断某一个对象里面是否存在某个属性,是常见错误场景排查,但是你真的知道该如何使用嘛,本文为大家整理了常用的三种方法,希望对大家有所帮助
    2023-05-05
  • 批量下载对路网图片并生成html的实现方法

    批量下载对路网图片并生成html的实现方法

    下面小编就为大家带来一篇批量下载对路网图片并生成html的实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考
    2016-06-06
  • 使用JavaScript实现随机颜色生成器

    使用JavaScript实现随机颜色生成器

    这篇文章主要为大家详细介绍了如何使用JavaScript+CSS实现一个随机颜色生成器,文中的示例代码讲解详细,感兴趣的小伙伴可以动手尝试一下
    2022-08-08
  • js中join()方法举例详解

    js中join()方法举例详解

    这篇文章主要给大家介绍了关于js中join()方法的相关资料,join方法用于把数组中的所有元素放入一个字符串,文中通过代码以及图文介绍的非常详细,需要的朋友可以参考下
    2023-10-10
  • JS禁止查看网页源代码的实现方法

    JS禁止查看网页源代码的实现方法

    本文给大家介绍js如何禁止查看网页源代码,并给大家分享了三种查看路径的方法,本文给大家介绍的非常详细,具有参考借鉴价值,感兴趣的朋友一起看看吧
    2016-10-10
  • 微信小程序底部tabBar遮挡内容的简单处理方法

    微信小程序底部tabBar遮挡内容的简单处理方法

    几乎每个app都会用到底部导航的,相对于小程序而言自然也是如此了,这篇文章主要给大家介绍了关于微信小程序底部tabBar遮挡内容的简单处理方法,需要的朋友可以参考下
    2021-08-08
  • JS控制HTML元素的显示和隐藏的两种方法

    JS控制HTML元素的显示和隐藏的两种方法

    本文给大家分享两种方法来控制html元素的显示和隐藏,分别利用html的style中两个属性,本文介绍的非常详细,具有参考借鉴价值,感兴趣的朋友一起看看吧
    2016-09-09

最新评论