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
					
					3869
					
				

			

		

		

			
				
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
					
					7973
					
				

			

		

		

			
				
一、申请百度地图密匙二、在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引入百度地图警告：A Parser-blocking, cross site (i.e. different eTLD+1) script....

				
			

			

				

					呱呱的博客
				

				

					03-27
					
					5850
					
				

			

		

		

			
				
控制台警告
在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
					
					2145
					
				

			

		

		

			
				
通过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
					
					1234
					
				

			

		

		

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

			
		

	





	

		

			

				
					
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
					
					657
					
				

			

		

		

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

			
		

	





	

		

			

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

				
			

			

				

					qq_42802528的博客
				

				

					11-10
					
					1974
					
				

			

		

		

			
				
添加asyncLoadMap.js。

			
		

	





	

		

			

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

				
			

			

				

					zhumizhumi的博客
				

				

					06-18
					
					2497
					
				

			

		

		

			
				
一、问题

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



二、解决办法

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

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

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

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



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





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

			
		

	





	

		

			

				
					
Vue项目使用百度地图api

				
			

			

				

					m0_51636525的博客
				

				

					10-19
					
					9057
					
				

			

		

		

			
				
百度地图API的使用步骤

			
		

	





	

		

			

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

				
			

			

				

					weixin_73602459的博客
				

				

					01-02
					
					735
					
				

			

		

		

			
				
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
					
					1457
					
				

			

		

		

			
				
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
  },





			
		

	





	

		

			

				
					
vue3使用百度地图(详)

				
			

			

				

					jyl919221lc的博客
				

				

					03-29
					
					1万+
					
				

			

		

		

			
				
百度地图学习，vue3学习地图，vue地图学习，AK密钥申请，vue-baidu-map-3x，自定义地图样式，vue-baidu-map-3x控件学习

			
		

	





	

		

			

				
					
vue本地项目调试百度地图

					
最新发布

				
			

			

				

					03-21
				

			

		

		

			
				
### Vue本地项目调试百度地图API配置教程  要在Vue本地项目中成功调试百度地图API，需完成以下几个方面的设置：  #### 1. 获取百度地图API密钥 首先需要前往百度开发者中心申请一个可用的AK（Access Key）。登录百度...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值