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.等遇到在补充八哈

结果:在这里插入图片描述

相关推荐

  1. uni静态资源引入及css图片图标引用规范

    2024-01-31 18:08:02       44 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-01-31 18:08:02       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-01-31 18:08:02       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-01-31 18:08:02       19 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-01-31 18:08:02       20 阅读

热门阅读

  1. uniapp如何引入uview组件?

    2024-01-31 18:08:02       40 阅读
  2. unity - 保存camera组件图像

    2024-01-31 18:08:02       25 阅读
  3. 并查集+01背包:1252. 搭配购买

    2024-01-31 18:08:02       31 阅读
  4. 搜索<1>——DFS与回溯

    2024-01-31 18:08:02       36 阅读
  5. C#中Lazy<T> 泛型类(延迟初始化对象)

    2024-01-31 18:08:02       35 阅读
  6. Android开发中用的根据文字使用Speech进行语音播报

    2024-01-31 18:08:02       31 阅读
  7. MicroPython核心:字符串驻留(String interning)

    2024-01-31 18:08:02       31 阅读
  8. 32.GitHub基础学习

    2024-01-31 18:08:02       36 阅读
  9. Kotlin开发中有关时间的具体使用

    2024-01-31 18:08:02       35 阅读
  10. Golang中的方法链

    2024-01-31 18:08:02       29 阅读
  11. 本周黄金价格将面临重大风险事件

    2024-01-31 18:08:02       44 阅读