百度地图高度自适应

最新推荐文章于 2023-04-20 19:24:34 发布
最新推荐文章于 2023-04-20 19:24:34 发布
阅读量6.1k 收藏 4
点赞数 3
CC 4.0 BY-SA版权
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_35434878/article/details/62215222
本文介绍了一种解决百度地图在网页中无法100%显示的问题。通过调整CSS样式增加position:absolute属性，使得地图能够完全铺满整个屏幕。

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

百度地图按照官网设置高度100%，地图不显示

  body,html,#allmap {
	width: 100%;
	height: 100%;
	overflow: hidden;
	margin: 0;
  }


经过百般查找终于找到方法：


 
 body,html,#allmap {
	width: 100%;
	height: 100%;
	overflow: hidden;
	margin: 0;
	position: absolute;
  }





没错加一句position:absolute；















                

        

    

    
  



    



                



	

		

			

				
					
QGraphicsView实现简易地图10『自适应窗口大小』

				
			

			

				

					浮生流年的博客
				

				

					05-07
					
					720
					
				

			

		

		

			
				
QGraphicsView实现简易地图10『自适应窗口大小』

			
		

	



                

            
              



	

		

			

				
					
百度地图显示路线，自适应范围

				
			

			

				

					qq_36716963的博客
				

				

					09-03
					
					603
					
				

			

		

		

			
				
百度地图显示路线，自适应范围
百度地图上添加overlay路线或者点，展示范围如何确定？
路线或者点的本质是什么？

点有对应的经纬度，在地图坐标系里也有对应的坐标（x，y）
路线由overlay绘制，本质也就是许多个点组成的

如何让地图上的路线（多点）和点 根据位置都展现在屏幕内（指定范围内）？

一个点再小，也可以看作一个矩形面（矩形）
无数个点就是无数个矩形面
把所有矩形面放在屏幕（指定范围/矩形）内
取这些矩形面的并集，再按照显示范围设置

矩形面的并集怎么求？

看百度SDK提供的工具类里的AP

			
		

	



              


  
              

                


	

		

			

				
					
百度地图自适应定位

				
			

			

				

					09-30
				

			

		

		

			
				
布局不好，但可以实现基本功能，自适应定位

			
		

	





	

		

			

				
					
地图高度自适应

				
			

			

				

					weixin_30248399的博客
				

				

					05-23
					
					376
					
				

			

		

		

			
				
<style type="text/css">
/*css控制地图大小自动充满整个窗口*/
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#map_canvas{width:100%;height:100%}
@media print {#map_canvas {height: 950px;}}
&...

			
		

	



		

			
		



	

		

			

				
					
地图自适应高度

				
			

			

				

					蜗牛小前的博客
				

				

					06-27
					
					1829
					
				

			

		

		

			
				
function autoMap() {
    var h = map_container.offsetWidth;
    map_container.setAttribute('style', 'height:' + ( h * 0.6 ) + 'px;');
}

			
		

	





	

		

			

				
					
百度地图api，改变宽高，地图自适应变化

				
			

			

				

					weixin_34279246的博客
				

				

					06-04
					
					6448
					
				

			

		

		

			
				
有些东西还是需要整理、手敲练习并记录下来~多一个备份挺好的

无须设置容器，直接css设置一段代码：
 body,html,#dituContent {
    // #dituContent 是地图当前div的id
	width: 100%;
	min-height: 100%;
	overflow: hidden;
	margin: 0;
	position: absolute;
	// 绝对...

			
		

	





	

		

			

				
					
VueCli3引入百度地图Api详细步骤+宽高自动页面自适应（踩坑+源代码）

				
			

			

				

					BBBling的博客
				

				

					09-17
					
					3175
					
				

			

		

		

			
				
首先去百度地图官网申请ak密钥，这个很简单，百度也有很多教程，就不细说了。
传送门：申请ak密钥
开发文档：百度地图API开发文档


打开项目文件，在public文件夹下的index.html页面中引入百度地图API
这里的密钥，要替换为你刚才申请的ak密钥


 <script type="text/javascript" src="http://api.map.baidu.com/getscript?v=3.0&ak=密钥"></script>

3.在src-&...

			
		

	





	

		

			

				
					
html嵌入html，高度自适应，标签切换。

				
			

			

				

					02-08
				

			

		

		

			
				
实现高度自适应的关键在于pym.js的`parentHeight`方法，它会发送一个消息到父页面，告知其当前iframe内容区域的高度，父页面接收到消息后，可以据此调整iframe的高度。  接下来是li标签的切换功能。在HTML中，li是...

			
		

	





	

		

			

				
					
百度地图实现 多点标记，自动调整缩放等级，自适应缩放

				
			

			

				

					dengla6847的博客
				

				

					08-30
					
					1647
					
				

			

		

		

			
				
由于公司业务需求，要求做到：百度地图实现 多点标记，自动调整缩放等级，自适应缩放，
效果图如下：




代码如下：（换上你自己的key）

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; cha...

			
		

	





	

		

			

				
					
【Vue百度地图自适应布局】：响应式设计，卫星图完美适配任何屏幕

				
			

			

				

					
				

			

		

		

			
				
本章我们将介绍Vue百度地图自适应布局的重要性和基本概念。自适应布局不仅要求地图能够完美适配各种设备，还要保证用户交互体验的一致性。  ## 1.1 自适应布局的需求背景  由于移动设备的普及和多样化，我们面临的...

			
		

	





	

		

			

				
					
百度地图自适应容器

				
			

			

				

					前端
				

				

					08-06
					
					5433
					
				

			

		

		

			
				
现象：当容器发生变化时，例如全屏，地图仍显示之前的大小，没有自适应地图容器的大小 
解决方案：



map.enableAutoResize();//设置当地图容器发生改变时地图自动适应...

			
		

	





	

		

			

				
					
百度地图多个点自适应屏幕

				
			

			

				

					04-14
				

			

		

		

			
				
百度地图多个点自适应屏幕，zoomLevel自动缩放，同屏展示marker及路径规划轨迹

			
		

	





	

		

			

				
					
在React中使用百度地图

					
热门推荐

				
			

			

				

					静水流深
				

				

					05-21
					
					1万+
					
				

			

		

		

			
				
首先需要修改index.html文件： 
 
在index.html中添加百度地图的调用接口

由于react工程是由脚手架创建的即create-react-app创建的。


  因此只需要修改node_modules文件下面的webpack.config.dev.js文件即可




下面就可以使用了：



使用demo:



import React, { Component } fro...

			
		

	





	

		

			

				
					
百度地图根据多个定位点自适应缩放级别（获取多个点位的中心点）

				
			

			

				

					qq_43651168的博客
				

				

					04-20
					
					4011
					
				

			

		

		

			
				
百度地图根据多个经纬度点位自适应缩放级别（获取多个点位的中心点）

			
		

	





	

		

			

				
					
百度地图设置自适应缩放级别

				
			

			

				

					丶深蓝的博客
				

				

					03-08
					
					6225
					
				

			

		

		

			
				
在实际的项目开发中，老大要求所有的mark点都要求在百度地图上显示出来，然后我更具自己的理解，在百度google上搜索 百度地图缩放级别自适应结果，发现有很多的博客都有写，也许是我太渣，都不符合我的要求，都不能用，没办法只能自己一个人默默的看API文档，

结果也没有找到怎么算出zoom的合适缩放等级，不过发现一个状态工厂 类里面能做到把所有的点都放在手机屏幕上



代码如下






...

			
		

	





	

		

			

				
					
百度地图设置高度100%，不显示问题

				
			

			

				

					weixin_49993560的博客
				

				

					12-01
					
					886
					
				

			

		

		

			
				
给地图加上position:absolute
父层定位position:relative
则地图继承的是父层的高度，父层多高，地图就多高。



			
		

	





	

		

			

				
					
vue-baidu-map根据标注点坐标范围计算显示缩放级别zoom自适应显示地

				
			

			

				

					肖肖肖丽珠的博客
				

				

					06-05
					
					5903
					
				

			

		

		

			
				
我知道一个后端给的地址的经纬度要显示在地图上。但是如果我不知道zoom就不知道 应该缩放多少啊。

我们可以在map的@ready事件中获取他的zoom


<template>
 <div>
 <baidu-map class="bm-view"
 :center="center"
 :zoom="zoom"
 @ready="handler"
 :scro...

			
		

	





	

		

			

				
					
Html map自适应方法

				
			

			

				

					qq_34184943的博客
				

				

					11-14
					
					907
					
				

			

		

		

			
				
`<%@ page language=“java” contentType=“text/html; charset=UTF-8”
    pageEncoding=“UTF-8”%>








点击图片
}
html,body{
width: 100%;
height: 100%;
}
body{
background-color: #FFFFFF;/背景颜色...

			
		

	





	

		

			

				
					
微信小程序：map地图自动缩放自适应大小

				
			

			

				

					彭世瑜的博客
				

				

					03-31
					
					6389
					
				

			

		

		

			
				
文档：

https://developers.weixin.qq.com/miniprogram/dev/api/media/map/wx.createMapContext.html
https://developers.weixin.qq.com/miniprogram/dev/api/media/map/MapContext.includePoints.html

<map id="map" show-location></map>

实现代码
// 获取地图实例
let Ma

			
		

	





	

		

			

				
					
微信小程序实战：利用百度地图接口实现地图周边搜索

				
			

			

				

					
				

			

		

		

			
				
本文主要介绍了如何在微信小程序中利用百度地图接口实现地图周边查询功能。首先，我们了解到微信小程序中的地图功能主要通过`map`组件来展示，尽管它默认使用腾讯地图，但通过设置特定属性如`longitude`、`latitude`...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 1

	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值