快捷導(dǎo)航

uni-app?app引入天地圖簡單代碼示例

更新時(shí)間：2024年02月02日 10:44:11 作者：qq_28761593

uni-app是一種基于Vue.js的跨平臺(tái)開發(fā)框架,允許開發(fā)者使用統(tǒng)一的代碼編寫多端應(yīng)用,這篇文章主要給大家介紹了關(guān)于uni-app?app引入天地圖的相關(guān)資料,需要的朋友可以參考下

話不多說代碼來了

<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); // 設(shè)置地圖位地星混合圖層
		    },
		}
	}
</script>

重點(diǎn)：

1.module=“test” lang=“renderjs” 必須加上，否則報(bào)Error in created hook: "TypeError: Cannot read property ‘createElement’ of undefined，TypeError: Cannot read property ‘createElement’ of undefined錯(cuò)誤。加上后手機(jī)瀏覽器也可以使用，目前沒打包，不知道打包會(huì)不會(huì)出錯(cuò)。

2.你天地圖申請的key