互联网知识

精准传达 • 价值共享

洞悉互联网前沿资讯,探寻网站营销规律

查看其它板块

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

作者:狐灵科技 | 2021-03-23 08:30 |点击:

摘要:网页通过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> 

 

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>

 

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接口

 

 


如没特殊注明,文章均为狐灵科技原创,转载请注明   "网页通过iframe嵌入百度地图API时自适应屏幕
多一份免费策划方案,总有益处。

请直接添加技术总监微信联系咨询

网站设计 品牌营销

多一份参考,总有益处

联系狐灵科技,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

业务热线:15082661954 / 大客户专线:15523356218