前言

vue 3.x
百度地图JavaScript API GL v1.0
百度地图的源码编辑器：http://lbs.baidu.com/jsdemo.htm#webgl0_0
本文代码在百度地图的源码编辑器均可执行

关于使用 vue 的页面

当只用 vue 做数据绑定，且未使用其它功能时，页面代码形式如下：

<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");    // 创建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 内。vue 初始化后，导致百度地图无法使用。因此，需要在vue初始化后，再初始化百度地图。
vue 的生命周期中，到mounted时可以操作dom。百度地图的初始化也就需要写在mounted中。

关于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已初始化完成。现在效果如何？</p></div><div id="baiduMapContainer"></div></div>
</body>
</html>
<script type="text/javascript">// GL版命名空间为BMapGL// 按住鼠标右键，修改倾斜角和角度var map = new BMapGL.Map("baiduMapContainer");    // 创建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>

动态创建元素

<!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");    // 创建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"> )，导致地图不能在预期的时间点上初始化，进而发生错误。
使用 v-show 替代 v-if ( <div id="baiduMapContainer" style="height: 500px; width: 100%;" v-show="dituEnable"> )可以避免该问题。

说明：

相同点：v-if与v-show都可以动态控制dom元素显示隐藏
不同点：v-if显示隐藏是将dom元素整个添加或删除（隐藏时dom元素不存在），而v-show隐藏则是为该元素添加css display:none（dom元素还在）。

等地图容器创建完成后再初始化地图：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");    // 创建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>

vue 页面使用百度地图相关推荐

vue项目引入百度地图BMapGL鼠标绘制和BMap辅助工具
目录引言 1.引用百度地图 2.在项目中使用百度地图 2-1.页面结构部分 2-2.js逻辑部分 3-1.页面结构部分 Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架.它旨 ...
vue集合离线百度地图
vue集合离线百度地图 vue.js百度地图api离线发布于 1月9日一.需求场景所谓离线,大概都是项目在内网中使用,无法连接外网,所以需要开发离线地图功能. 在看以下步骤前,先提示这个vue项 ...
Vue中使用百度地图
安装 npm $ npm install vue-baidu-map --save cdn <script src="https://unpkg.com/vue-baidu-map&q ...
vue + echarts + ( bmap) 百度地图实现公交、骑行、车辆轨迹图
vue + echarts + ( bmap) 百度地图实现公交.骑行.车辆轨迹图最终目标最终目标:个性化的实现公交路线图先看看效果以免白看一场,如果你是想实现类似的效果可以继续往下看码起 ...
vue中调用百度地图实现搜索等功能
vue中调用百度地图实现搜索等功能在最近做电商项目时用户订单等物流信息想做的更加详细点所以加入了地图这个小功能,不是很难只是在一个未知的领域可能有点迷茫现在也是体会到了,学新的东西还是得看官方文档 ...
Vue项目使用百度地图——经纬度地图组件的封装及使用
1 前言要在vue项目使用百度地图api,首先应做以下配置 (1)index.html index.html添加script <script src="http://api.map. ...
微信H5页面嵌入百度地图---解决手机的webKit定位，ios系统对非https网站不提供支持问题
微信H5页面嵌入百度地图---解决手机的webKit定位,ios系统对非https网站不提供支持问题参考文章: (1)微信H5页面嵌入百度地图---解决手机的webKit定位,ios系统对非http ...
在web页面嵌入百度地图（含定点定位）
在web页面嵌入百度地图(含定点定位) 一.操作步骤二.可能遇到的问题 1.标记图标没有正常显示出来 2.使用到项目中可能遇到的问题 (1)地图内容显示不正常 (2)标注名称的边框显示不正常三.参 ...
vue中调用百度地图获取经纬度
项目中,需要实现获取当前位置的经纬度,或者搜索某个位置并获取经纬度信息,我使用的的是vue,地图使用的是百度地图. 默认自动获取当前位置经纬度拖动小红标获取经纬度关键词查询获取经纬度前期准备 ...

vue 页面使用百度地图

前言