网页通过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接口

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

详情:https://www.dedehtml.com/help/baidumapapi-https.html

最终效果:

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM