當前位置：首頁 > 前端技术 > vue >内容正文

vue

vue 页面使用百度地图

發(fā)布時間：2024/9/19 vue 34 豆豆

生活随笔收集整理的這篇文章主要介紹了 vue 页面使用百度地图小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

前言

vue 3.x
百度地圖JavaScript API GL v1.0
百度地圖的源碼編輯器：http://lbs.baidu.com/jsdemo.htm#webgl0_0
本文代碼在百度地圖的源碼編輯器均可執(zhí)行

關(guān)于使用 vue 的頁面

當只用 vue 做數(shù)據(jù)綁定，且未使用其它功能時，頁面代碼形式如下：

<html> <body> <div id="appContainer"> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({el: '#appContainer',... }); </script> </body> </html>

使用百度地圖

<!DOCTYPE html> <html> <body> <div id="appContainer"><div id="baiduMapContainer" style="height: 500px; width: 100%;"></div> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=您的密鑰"></script> <script> var baiduMap = null; function initBaiduMap() {// GL版命名空間為BMapGL// 按住鼠標右鍵，修改傾斜角和角度baiduMap = new BMapGL.Map("baiduMapContainer"); // 創(chuàng)建Map實例baiduMap.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11); // 初始化地圖,設置中心點坐標和地圖級別baiduMap.enableScrollWheelZoom(true); //開啟鼠標滾輪縮放 }var app = new Vue({el: '#appContainer',data: {},created: function () {},mounted: function (){// 初始化百度地圖initBaiduMap();}, }); </script> </body> </html>

解釋

百度地圖容器 baiduMapContainer 在 vue 容器 appContainer 內(nèi)。vue 初始化后，導致百度地圖無法使用。因此，需要在vue初始化后，再初始化百度地圖。
vue 的生命周期中，到mounted時可以操作dom。百度地圖的初始化也就需要寫在mounted中。

關(guān)于vue生命周期的講解，參考這里：https://segmentfault.com/a/1190000020058583

百度地圖如何被vue破壞的？

<!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="initial-scale=1.0, user-scalable=no" /><style type="text/css">body, html,#appContainer,#baiduMapContainer{width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微軟雅黑";}#appContainer {display: flex; flex-direction: column;}#message{display: block;}#baiduMapContainer {flex-basis: auto;}</style><script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=您的密鑰"></script><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><title>地圖展示</title> </head> <body><div id="appContainer"><div id="message"><p v-if="vueInitDone">百度地圖如何被vue破壞的？</p><p v-if="!vueInitDone">先初始化百度地圖，過5秒后再初始化vue。等5秒再看效果。</p><p style="display: none" v-bind:style="{display: vueInitDone?'block':'none'}">vue已初始化完成。現(xiàn)在效果如何？</p></div><div id="baiduMapContainer"></div></div> </body> </html> <script type="text/javascript">// GL版命名空間為BMapGL// 按住鼠標右鍵，修改傾斜角和角度var map = new BMapGL.Map("baiduMapContainer"); // 創(chuàng)建Map實例map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11); // 初始化地圖,設置中心點坐標和地圖級別map.enableScrollWheelZoom(true); //開啟鼠標滾輪縮放setTimeout(function() {var app = new Vue({el: '#appContainer',data: {vueInitDone: false,},mounted: function (){this.vueInitDone= true;},});}, 1000 * 5); </script>

動態(tài)創(chuàng)建元素

<!DOCTYPE html> <html> <body> <div id="appContainer"><div id="baiduMapContainer" style="height: 500px; width: 100%;" v-if="dituEnable"></div> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=您的密鑰"></script> <script> function initBaiduMap() {// GL版命名空間為BMapGL// 按住鼠標右鍵，修改傾斜角和角度baiduMap = new BMapGL.Map("baiduMapContainer"); // 創(chuàng)建Map實例baiduMap.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11); // 初始化地圖,設置中心點坐標和地圖級別baiduMap.enableScrollWheelZoom(true); //開啟鼠標滾輪縮放 } var app = new Vue({el: '#appContainer',data: {dituEnable: false,},mounted: function (){let _this = this;setTimeout(function(){_this.dituEnable = true;},1000*5);// 初始化百度地圖initBaiduMap();}, }); </script> </body> </html>

控制臺輸出錯誤如下：

v-show 替代 v-if

當使用 v-if 控制地圖容器時( <div id="baiduMapContainer" style="height: 500px; width: 100%;" v-if="dituEnable"> )，導致地圖不能在預期的時間點上初始化，進而發(fā)生錯誤。
使用 v-show 替代 v-if ( <div id="baiduMapContainer" style="height: 500px; width: 100%;" v-show="dituEnable"> )可以避免該問題。

說明：

相同點：v-if與v-show都可以動態(tài)控制dom元素顯示隱藏
不同點：v-if顯示隱藏是將dom元素整個添加或刪除（隱藏時dom元素不存在），而v-show隱藏則是為該元素添加css display:none（dom元素還在）。

等地圖容器創(chuàng)建完成后再初始化地圖：vue.$nextTick

<!DOCTYPE html> <html> <body> <div id="appContainer"><div v-if="!dituEnable"><p>你來早了！！！百度地圖要10秒后才能初始化完成</p><p>倒計時：{{leftSeconds}}</p></div><div id="baiduMapContainer" style="height: 500px; width: 100%;" v-if="dituEnable"></div> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=您的密鑰"></script> <script> function initBaiduMap() {// GL版命名空間為BMapGL// 按住鼠標右鍵，修改傾斜角和角度baiduMap = new BMapGL.Map("baiduMapContainer"); // 創(chuàng)建Map實例baiduMap.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11); // 初始化地圖,設置中心點坐標和地圖級別baiduMap.enableScrollWheelZoom(true); //開啟鼠標滾輪縮放 } var app = new Vue({el: '#appContainer',data: {dituEnable: false,initDituFlag: false,leftSeconds: 10,},mounted: function (){let _this = this;var dituTimer = setInterval(function(){_this.leftSeconds-= 1;if (0 == _this.leftSeconds) {_this.dituEnable = true;clearInterval(dituTimer);}},1000);},watch: {dituEnable: function (val) {let _this = this;if (!_this.initDituFlag){_this.$nextTick(function(){// 初始化百度地圖initBaiduMap();});_this.initDituFlag= true;}}}, }); </script> </body> </html>

與50位技術(shù)專家面對面20年技術(shù)見證，附贈技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的vue 页面使用百度地图的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇：无花果树叶子的功效与作用、禁忌和食用方法
下一篇： html5倒计时秒杀怎么做,vue 设