Vue项目中引入百度地图API出现警告

最新推荐文章于 2025-02-15 11:25:39 发布
最新推荐文章于 2025-02-15 11:25:39 发布
阅读量644 收藏 1
点赞数 1
CC 4.0 BY-SA版权
文章标签： vue.js 前端 javascript js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/TechNovaX/article/details/132263409
js 专栏收录该内容
499 篇文章 ¥59.90 ¥99.00
订阅专栏
在Vue项目中，直接在HTML引入百度地图API会引发安全警告。通过使用Vue的异步组件加载和生命周期钩子，可以在组件渲染完成后动态加载API，确保安全性和可维护性。具体步骤包括：删除HTML中的API引入，安装SDK，创建异步组件，动态添加script标签，并在加载完成后初始化地图。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

Vue项目中引入百度地图API出现警告

最近在开发一个Vue项目时，我遇到了一个有关引入百度地图API的问题。当我尝试在Vue的index.html文件中引入百度地图API时，浏览器控制台显示了一个警告信息。

这个警告信息提示说，在Vue项目中直接在HTML文件中引入外部脚本可能会导致一些潜在的安全风险。虽然这只是一个警告，但为了确保项目的安全性和可维护性，我们应该采取一些措施来解决这个问题。

为了解决这个警告，我们可以使用Vue的特性和生命周期钩子来动态加载百度地图API，并在组件渲染完成后再进行初始化操作。下面是一个示例代码，演示了如何在Vue项目中安全地引入百度地图API。

首先，我们需要在Vue的index.html文件中去除原来的百度地图API引入代码。然后，在需要使用百度地图的组件中，我们可以使用Vue的异步组件加载功能来动态引入百度地图API。具体的步骤如下：

  1. 在项目的根目录下安装百度地图API的JavaScript SDK。你可以从百度地图开放平台获取到最新版本的SDK文件，并将其保存在项目的public目录下。

  2. 在需要使用百度地图的组件中，创建一个名为BaiduMap.vue的文件。在该文件中，我们可以使用Vue的异步组件功能来动态加载百度地图API。以下是示例代码：


                

                
                
        

    

  


        

            

                

                

                了解本专栏
                
                
                  
                订阅专栏 解锁全文
                 
            

        


    



                



	

		

			

				
					
从零开始Vue项目中使用MapboxGL开发三维地图教程（一）MapboxGL介绍以及前期vue项目的搭建

				
			

			

				

					tigerhhzz的博客
				

				

					06-11
					
					3867
					
				

			

		

		

			
				
1、Mapbox-gl简介2、搭建vue项目2.1、创建vue项目2.2、注册mapbox官网2.3、mapbox-gl入门案例3、Mapbox-gl地图主要配置参数说明Mapbox-gl是一个开源、基于webgl技术的前端地图类库。地图数据渲染和可视化这块我们经常用到的有商业使用的如：百度地图API和JS、高德地图的API和JS、ESRI的arcgis的全家桶，同时也有开源的一些地图引擎如：openlayers、mapboxgl、Leaflet等。

			
		

	



                

            
              



	

		

			

				
					
vue引入百度地图map

				
			

			

				

					CoCoManYYn的博客
				

				

					05-13
					
					7970
					
				

			

		

		

			
				
一、申请百度地图密匙二、在index.html中引入<script  type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=KCzp8claYra8uYAvahElV9oKUT6j7Gx1" ></script>三、在webpack.base.conf.js配置文件中配置BMap；// 在...

			
		

	



              


  
              

                


	

		

			

				
					
Vue项目使用百度地图api

				
			

			

				

					m0_51636525的博客
				

				

					10-19
					
					9057
					
				

			

		

		

			
				
百度地图API的使用步骤

			
		

	





	

		

			

				
					
vue3 使用百度地图，踩坑日历

				
			

			

				

					坚果程序开发存档博客专栏
				

				

					11-10
					
					3015
					
				

			

		

		

			
				
vue中使用百度地图，之前使用的是vue-baidu-map组件，在vue2中引入完全能正常使用，但是引入到vue3项目中，BMap is not defined频繁报错.。

官方地址：Vue Baidu Map

vue3中只能使用以下方法

一、public/index.html 中 加入


<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=你的ak"></script&gt

			
		

	



		

			
		



	

		

			

				
					
Vue引入百度地图警告：A Parser-blocking, cross site (i.e. different eTLD+1) script....

				
			

			

				

					呱呱的博客
				

				

					03-27
					
					5849
					
				

			

		

		

			
				
控制台警告
在vue中引入地图控制台输出：

警告出现原因
页面渲染以后调用了document.write() ，而这种方式chrome53以上版本是不允许的。
警告的用意
对于在2G，3G 或者是慢 wifi 环境下面，使用document.write()动态加载资源会让页面的展现慢10秒以上，浏览器可以呈现页面之前，必须通过解析HTML标记来构建DOM树。每当解析器遇到脚本时，它必须停止并执行...

			
		

	





	

		

			

				
					
A Parser-blocking, cross-origin script is invoked via document.write. This may be blocked by the bro

					
热门推荐

				
			

			

				

					qq_36291682的博客
				

				

					03-09
					
					3万+
					
				

			

		

		

			
				
使用Chrome访问第三方的js库时，在控制台出现警告：

A Parser-blocking, cross-origin script, https://example.com/script.js, is invoked via document.write. This may be blocked by the browser if the device has poor network 

			
		

	





	

		

			

				
					
react项目引入百度地图api出现警告：A parser-blocking, cross site (i.e. different eTLD+1) script, http://api.map.ba

				
			

			

				

					Aan___的博客
				

				

					01-24
					
					2138
					
				

			

		

		

			
				
通过document.write调用一个解析器阻塞，跨站点(即不同的eTLD+1)脚本，http://api.map.baidu.com/getscript?对于使用慢速连接(如2G)的用户，通过document.write()加载的第三方脚本的性能损失通常非常严重，以至于导致主页内容的显示延迟数十秒。在2G连接上的用户HTTP缓存丢失的情况下，该特性将阻止通过document.write()插入的跨域解析器阻塞脚本的加载。首先引入脚本，在index.html中引入以下script，密钥可去。

			
		

	





	

		

			

				
					
使用百度地图浏览器警告

				
			

			

				

					lyx1838102537的博客
				

				

					10-08
					
					1094
					
				

			

		

		

			
				
如图警告
项目中使用
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=你的key值"></script>

解决办法：
第一种：把你引用的地图中的 api 换成 getapi
第二种：直接把你引用的百度地图的地址换成警告输出给你的地址
 <script type="text/javascript" src="https://api.map.baidu.com/gets.

			
		

	





	

		

			

				
					
导入百度地图api发生的报错

				
			

			

				

					ssxx_zzyy_baba的博客
				

				

					01-24
					
					1231
					
				

			

		

		

			
				
最近写代码的时候看见控制台报错，然后就是一顿百度最后终于发现了是百度api控件的问题。找到自己导入百度地图api的地方，然后把 api 修改成 getscript 即可。因为使用的地图比较简单，改了之后暂时没发现什么问题。

			
		

	





	

		

			

				
					
vue中使用百度地图报错“BMapGL is not defined”

				
			

			

				

					qq_42802528的博客
				

				

					11-10
					
					1964
					
				

			

		

		

			
				
添加asyncLoadMap.js。

			
		

	





	

		

			

				
					
vue中引入百度地图API

				
			

			

				

					qq_40224400的博客
				

				

					02-20
					
					1571
					
				

			

		

		

			
				
前言
由于项目中需要用到逆地址解析功能及由坐标点（112.54362， 30.2546）转为地址信息（xx省xx市xx县），故考虑用百度地图API进行完成。
项目地址：github
查阅资料有两种方法可以实现。
第一种 直接引入script标签
按照官方的样式在index.html中添加如下代码
<script type="text/javascript" src="http://api.m...

			
		

	





	

		

			

				
					
为什么Vue3不建议自动引入API

				
			

			

				

					yan1915766026的博客
				

				

					08-30
					
					656
					
				

			

		

		

			
				
为什么不建议使用unplugin-auto-import插件，有以下几点

			
		

	





	

		

			

				
					
【Vue + 百度地图】引用百度地图api地址报警告 A parser-blocking cross site is invoked via document write

				
			

			

				

					zhumizhumi的博客
				

				

					06-18
					
					2497
					
				

			

		

		

			
				
一、问题

在Vue中引用百度地图之后，报警告



二、解决办法

百度别的大神的博客之后，出现了不止两种解决办法

第一种：把你引用的地图中的 api 换成 getapi

第二种：直接把你引用的百度地图的地址换成警告输出给你的地址

仔细看它的警告，上面其实是说了解决办法的，就是把你引用的百度地图的地址，换成警告给你的地址



两种方式的对比具体如下：





参考作者博客【表示感...

			
		

	





	

		

			

				
					
使用vue3是引入百度地图所遇到的问题？

				
			

			

				

					weixin_73602459的博客
				

				

					01-02
					
					733
					
				

			

		

		

			
				
v=1.0&type=webgl&ak=您的密钥"></script>我们的container就是id名，一定不要忘记设置宽高否则则进行警告。通过在html模版中设置一个div元素同时设置id属性。

			
		

	





	

		

			

				
					
百度地图实用案例

				
			

			

				

					m0_57479235的博客
				

				

					12-07
					
					218
					
				

			

		

		

			
				
1、创建一个js文件
export function BMPGL(ak) {
    return new Promise(function (resolve, reject) {
        window.init = function () {
            // eslint-disable-next-line
            resolve(BMapGL)
        }
        const script = document.createElement('scri

			
		

	





	

		

			

				
					
【已解决】调用百度地图API出错，地图未显示。

				
			

			

				

					sisteryaya的博客
				

				

					08-04
					
					1万+
					
				

			

		

		

			
				
百度地图API、热力图、ak

			
		

	





	

		

			

				
					
解决vue-baidu-map在IE和火狐下不显示的问题

				
			

			

				

					花落微凉梦清幽的博客
				

				

					12-27
					
					1760
					
				

			

		

		

			
				
问题描述：

在使用vue-baidu-map时，发现地图在谷歌或者谷歌内核的浏览器下可以正确显示，但是在火狐和IE，或者IE内核（如遨游等双核浏览器的IE内核模式下）不显示，甚至连VUE项目都打不开来，且报两处错误，如下：





光看报错，很难确定错误原因，我们还是去vue-baidu-map中找答案吧，

我们在官方文档中发现这么一句话，加载vue-baidu-map是要安装loader...

			
		

	





	

		

			

				
					
在 Vue 3 中使用百度地图的详解，涵盖常见场景、问题及最佳解决方案

				
			

			

				

					繁若华尘的博客
				

				

					02-15
					
					1452
					
				

			

		

		

			
				
Vue 3 集成百度地图的核心在于正确处理异步加载、全局变量声明及响应式数据同步。推荐使用官方封装库。

			
		

	





	

		

			

				
					
vue-amap报错 ‘AMap‘ is not defined (no-undef) at src\views\concact.vue:133:26

				
			

			

				

					c_qianxia5040的博客
				

				

					08-25
					
					1635
					
				

			

		

		

			
				
报错信息：
解决方案：
在.eslintrc.js文件中添加下面代码，与rules平级
globals: {
    'AMap': false
  },





			
		

	





	

		

			

				
					
vue本地项目调试百度地图

					
最新发布

				
			

			

				

					03-21
				

			

		

		

			
				
### Vue本地项目调试百度地图API配置教程

要在Vue本地项目中成功调试百度地图API，需完成以下几个方面的设置：

#### 1. 获取百度地图API密钥
首先需要前往百度开发者中心申请一个可用的AK（Access Key）。登录百度云控制台后，在【服务管理】->【创建应用】页面填写相关信息，选择应用类型为「Web 应用」。完成后会获得一个专属的AK[^5]。

#### 2. 安装依赖库
为了更方便地集成百度地图功能，可以通过npm安装`vue-baidu-map`插件来简化操作流程：
```bash
npm install vue-baidu-map --save
```

#### 3. 初始化百度地图SDK
在项目的入口文件（通常是main.js）中引入并初始化百度地图插件，同时传入之前获取到的AK作为参数：
```javascript
import Vue from &#39;vue&#39;;
import BaiduMap from &#39;vue-baidu-map&#39;;

Vue.use(BaiduMap, {
    ak: &#39;your_baidu_map_api_key_here&#39;
});
```
注意替换掉占位符`your_baidu_map_api_key_here`为你自己的实际AK值[^1]。

#### 4. 解决可能遇到的eslint错误
如果在编写代码过程中出现了类似`ESLint:&#39;BMap&#39; is not defined.`这样的警告信息，则按照如下方法处理即可消除该类问题：
- 方法一：直接忽略特定变量未定义检测规则；
- 推荐的方法二是在相关脚本顶部声明全局使用的对象名列表，例如对于百度地图而言可写成这样形式：
```javascript
/* global BMap */
new BMap.Map("container");
```
或者当涉及到更多控件选项时也可以扩展声明范围[^4]。

#### 5. 使用Git版本控制系统优化协作效率
在整个开发周期内建议始终采用git工具记录每一次有意义的变化点，并合理规划不同特性之间的逻辑关系以便于后期维护更新工作顺利开展。比如每当新增某个独立的功能模块前先基于master主线派生出专门用于实现此特性的子分支，在确认无误后再将其合并回去形成最终稳定版发布包[^3]。

```python
print("以上即为完整的解决方案")
```

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值