vue 页面使用百度地图

最新推荐文章于 2024-08-02 10:13:33 发布
最新推荐文章于 2024-08-02 10:13:33 发布
阅读量591 收藏 6
点赞数 2
分类专栏： html vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sayyy/article/details/116011223
版权
vue 同时被 2 个专栏收录
19 篇文章 0 订阅
订阅专栏
html
10 篇文章 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>

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

sayyy
关注
专栏目录
快速上手Vue+百度地图
Crazymryan的博客
08-06 3854
前言“地图也是很常见的一些需求了，今天老严带大家使用一个简单的地图目录结构准备工作1.创建脚手架2.安装地图3.在main中引入4.简单使用百度地图5.地图缩放6.自定义地图样式7.地图...
如何在vue单页应用中使用百度地图
weixin_30834019的博客
03-07 212
　　作为一名开发人员，每次接到开发任务，我们首先应该先分析需求，然后再思考技术方案和解决方案。三思而后行，这是一个好的习惯。 需求：本项目是采用vue组件化开发的单页应用项目，现需要在项目中引入百度的地图展示功能，用于展示所有项目的分布情况。搜索功能（省略，不是这里介绍的内容）....... 交互：选中左侧的项目，选中项高亮，自动定位到右侧地图中项目所在位置，并弹出项目的基本信息。...
vue3集成百度地图实现定位和路线规划的功能
最新发布
m0_66809960的博客
08-02 356
第三步展示地图开启定位并实现路线规划。第一步引入百度script。
【Vue】vue项目中使用百度地图教程
m0_61049675的博客
05-14 3007
由于API密钥可能会被滥用，因此请确保你的API密钥不会暴露在客户端代码中（例如，不要直接将其硬编码在前端代码中）。如果你需要在前端使用API密钥，请确保你的应用有适当的安全措施来防止未经授权的访问。在你的Vue项目中运行并测试地图的显示和功能。在你的Vue项目的public/index.html或者相应的HTML模板文件中，通过。你还可以为地图添加事件监听器，以处理地图的各种事件，比如点击事件、拖拽事件等。元素作为地图的容器，并给它一个唯一的ID。是地图的中心点坐标，15是地图的缩放级别。
vue中异步加载百度地图及相关资源
Vanilla1119的博客
04-03 2189
vue中异步加载百度地图及相关资源 官网加载百度地图基础API都是index.html直接加script，包括点聚合API也是这种方式。 但实际应用中，有时候只有一个页面需要到百度地图，没必要全局都加载百度地图的文件，会增加负担. 因此介绍vue中如何异步加载百度地图及其相关资源（比如百度地图的点聚合API也需要加载进来js文件） 我们来对比一下： 一般加载： <!-- index.ht...
vue页面嵌套百度地图
m0_51458935的博客
10-21 501
vue嵌套百度地图和检索
vue项目中使用百度地图的方法
12-12
1.在百度地图申请密钥: http://lbsyun.baidu.com/  将 [removed][removed] 中的 密钥替换成你申请的,在 vue项目的index.html引用。 2. 在build 文件下下的 webpack.base.conf.js贴入代码 externals: { "BMap": ...
浅谈Vue下使用百度地图的简易方法
08-27
在使用百度地图时，可能会遇到一些问题，例如页面加载顺序导致的错误等。解决这些问题需要根据实际情况进行调整，例如在mounted方法中调用loadBMapScript方法和qeuryLocation方法等。 结论 本篇文章介绍了如何在...
2种在vue项目中使用百度地图的简单方法
10-17
4. 在Vue页面的`mounted`钩子中，使用`this.$nextTick`确保DOM已经渲染完成，然后调用`MP`函数并传入`ak`，在Promise resolve后获取到百度地图的API对象，并通过API对象调用百度地图的方法。 在使用百度地图API时，...
vue中使用heatmapjs的示例代码（结合百度地图）
12-13
业务需求：将heatmap引入页面中，做成一个可引入的框架，使用于所有页面。代码如下。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> ...
详解vue项目中调用百度地图API使用方法
10-17
本文将详细讲解如何在Vue项目中调用百度地图API，包括申请密钥、引入API、配置Webpack、创建地图对象及在组件中使用等步骤。 **步骤一：申请百度地图密钥（AK）** 首先，你需要访问百度地图API的官方链接地址：...
Vue引入百度地图增加导航功能
weixin_52707481的博客
08-25 2111
这两天在开发项目的过程中遇到一个需求需要引入百度地图增加导航功能，话不多说直接上代码 首先引入百度地图API输入在百度地图API申请的秘钥 <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=申请的key"></script> <script type="text/javascript" src="//api.map.baidu.com/api?type=web...
在vue或html中如何使用百度地图
四月
10-11 380
【代码】在vue或html中如何使用百度地图。
vue怎么把百度地图放上去
七月❤的博客
08-30 394
为了尊重原创，附上原创链接：https://www.cnblogs.com/wangqi2019/p/11040239.html 1.项目根目录下下载百度地图插件，（若是npm install了可以不用） 　　npm install vue-baidu-map –save 2.在首页index.html中引入百度地图: 　　<script type="text/javascrip...
vue使用百度地图记录
Revival_Liang的博客
09-06 1445
{{streetNumber?streetNumber:''}} {{address?address:''}} @import '../../styles/commonscss.scss'; .home_map .map{width: 100vw;height:100vh; position: fixed;} .home_map .info
当项目中多个页面使用地图组件时，简易写法（亲测有效）vue3 + 地图
weixin_46411005的博客
04-10 202
当项目中多个页面使用地图组件时，简易写法（亲测有效）vue3 + 地图
初始化百度地图
Anyuegogogo的博客
02-23 212
import { Boundary, Map, Point, Polygon } from 'BMap'; const mapStyle = [ { 'featureType': 'road', 'elementType': 'all', 'stylers': { 'lightness': 20 } }, { 'featureType': 'highway', 'elementType': 'geometry', 'style
VUE百度地图后三位为XXX就更换table数据显示
weixin_45098257的博客
05-27 78
<template> <div style="width: 87%; margin-top: 0; height: 870px; float: left"> <!-- <weather class="weather" mode="tag" showBgImg></weather> --> <baidu-map class="map" :center="{ lng: center.lng, lat: center
Vue中如何进行地图展示与交互（如百度地图、高德地图）？
徐师兄的博客
06-09 4444
随着移动互联网的普及，地图应用已经成为人们生活中不可或缺的一部分。在Vue.js中，我们可以使用第三方地图库（如百度地图、高德地图）来实现地图的展示和交互。本文将介绍如何在Vue.js中使用百度地图和高德地图，并提供代码示例。
VUE3使用百度地图
12-05
在Vue3中使用百度地图，可以按照以下步骤进行操作： 1. 在`index.html`文件中引入百度地图API的JS文件，例如： ```html 您的密钥"> ``` 2. 在Vue3组件中，可以通过`mounted`钩子函数来初始化地图，例如： ```...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值