uni-app?app引入天地圖簡(jiǎn)單代碼示例
話(huà)不多說(shuō)代碼來(lái)了
<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ī)瀏覽器也可以使用，目前沒(méi)打包，不知道打包會(huì)不會(huì)出錯(cuò)。
2.你天地圖申請(qǐng)的key
目前存在的問(wèn)題：
1.一根手指頭沒(méi)法滑動(dòng)地圖，需要兩根筷子
2.會(huì)出現(xiàn)：Uncaught TypeError: Cannot read property ‘x’ of undefined at http://api.tianditu.gov.cn/api?v=4.0&tk=xxxxxxxxxxx
3.等遇到在補(bǔ)充八哈
結(jié)果：
補(bǔ)充一下：數(shù)據(jù)交互有的沒(méi)法在兩個(gè)之間進(jìn)行，不過(guò)可以借助vuex和監(jiān)聽(tīng)來(lái)實(shí)現(xiàn)。
總結(jié)
到此這篇關(guān)于uni-app app引入天地圖的文章就介紹到這了,更多相關(guān)uni-app app引入天地圖內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
怎么讓<textarea></textarea>之間包含的文本原封不動(dòng)的顯示出來(lái)呢？下面小編就為大家介紹一下具體的實(shí)現(xiàn)方法吧2013-11-11
JavaScript基礎(chǔ)知識(shí)之方法匯總結(jié)
本文給大家分享了javascript基礎(chǔ)知識(shí)，包括數(shù)組的方法，函數(shù)的方法，數(shù)字的方法，對(duì)象的方法，字符串的方法，常規(guī)方法，正則表達(dá)式方法，本文介紹的非常詳細(xì)，具有參考價(jià)值特此分享供大家參考2016-01-01
jquery插件bootstrapValidator數(shù)據(jù)驗(yàn)證詳解
這篇文章主要為大家詳細(xì)介紹了jquery插件bootstrapValidator數(shù)據(jù)驗(yàn)證使用教程，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-11
判斷某一個(gè)對(duì)象里面是否存在某個(gè)屬性，是常見(jiàn)錯(cuò)誤場(chǎng)景排查，但是你真的知道該如何使用嘛，本文為大家整理了常用的三種方法，希望對(duì)大家有所幫助2023-05-05
批量下載對(duì)路網(wǎng)圖片并生成html的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇批量下載對(duì)路網(wǎng)圖片并生成html的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考2016-06-06
使用JavaScript實(shí)現(xiàn)隨機(jī)顏色生成器
這篇文章主要為大家詳細(xì)介紹了如何使用JavaScript+CSS實(shí)現(xiàn)一個(gè)隨機(jī)顏色生成器，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以動(dòng)手嘗試一下2022-08-08
這篇文章主要給大家介紹了關(guān)于js中join()方法的相關(guān)資料,join方法用于把數(shù)組中的所有元素放入一個(gè)字符串,文中通過(guò)代碼以及圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-10-10
JS禁止查看網(wǎng)頁(yè)源代碼的實(shí)現(xiàn)方法
本文給大家介紹js如何禁止查看網(wǎng)頁(yè)源代碼，并給大家分享了三種查看路徑的方法，本文給大家介紹的非常詳細(xì)，具有參考借鑒價(jià)值，感興趣的朋友一起看看吧2016-10-10
微信小程序底部tabBar遮擋內(nèi)容的簡(jiǎn)單處理方法
幾乎每個(gè)app都會(huì)用到底部導(dǎo)航的,相對(duì)于小程序而言自然也是如此了,這篇文章主要給大家介紹了關(guān)于微信小程序底部tabBar遮擋內(nèi)容的簡(jiǎn)單處理方法,需要的朋友可以參考下2021-08-08
本文給大家分享兩種方法來(lái)控制html元素的顯示和隱藏，分別利用html的style中兩個(gè)屬性，本文介紹的非常詳細(xì)，具有參考借鑒價(jià)值，感興趣的朋友一起看看吧2016-09-09