QQ在线咨询在线咨询帮做网络积累了丰富的项目经验,聚集了一批资深专业人才,售后服务一流,内业好评不断,是一家专业的网站建设服务商。微信:skin2288专业的网站建设服务商。微信:skin2288网站建设地图 | 城市分站

网页通过iframe嵌入百度地图API时自适应屏幕

时间:2021-06-02 23:14:44作者:网站建设工程师来源:帮做网络浏览量:0

导  读:网页通过iframe嵌入百度地图API时,如何让地图自适应屏幕 1、iframe标签按照常规响应式的样式写就可以了,比如: style type = text/css iframe { width : 100% ; min-height : 471px }@ media screen and (max-width: 640px ) { #iframe { min-height : 271px }}@ media screen and (min-width: 750px ) and (max-width: 800px ){ #iframe { min-height : 271px }} / style iframe src = /baidumap.html id = iframe / iframe 复制 1 2 3 4 5 6 7 8 9 10 2、baidumap.html 百度地图容器这样写就可以了 !--百度地图容器-- div id = dituContent / div style type = text/css #dituContent { position : absolute; width : 99% ; height : 98% ;}@ media screen and (max-width: 640px ) { #dituContent { width : 98% ; height : 97% ;}} / style 复制 1 2 3 4 5 6 7 8 9 10 3、公司地址
网页通过iframe嵌入百度地图API时,如何让地图自适应屏幕

1、iframe标签按照常规响应式的样式写就可以了,比如:

<style type="text/css">
iframe{width:100%;min-height:471px}
@media screen and (max-width: 640px) {
	#iframe{min-height:271px}
}
@media screen and (min-width:750px) and (max-width:800px){
	#iframe{min-height:271px}
}
</style>
<iframe src="/baidumap.html" id="iframe"></iframe> 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

2、baidumap.html 百度地图容器这样写就可以了

<!--百度地图容器-->
<div id="dituContent"></div>

<style type="text/css">
	#dituContent{position: absolute;width:99%;height: 98%;}

	@media screen and (max-width: 640px) {
		#dituContent{width:98%;height: 97%;}
	}
</style>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

3、公司地址坐标获取

公司地址坐标可以通过百度“拾取坐标系统”获取:

http://api.map.baidu.com/lbsapi/getpoint/index.html

或者直接创建地图

http://api.map.baidu.com/lbsapi/creatmap/index.html

4、baidumap.html 示例下载

下载

注意,看你网站是https 还是 http ,里面调用不同百度api接口

标题、文字内容、经度纬度修改


转载请注明出处:网站首页> 知识学堂 > dedecms仿站 > 网页通过iframe嵌入百度地图API时自适应屏幕


继续阅读相关文章