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