当前位置:主页 > 站长学院 > 网页设计 >

网页使用iframe嵌入自适应的百度自定义地图的方法

YouYou 发布于 2021-03-25
频道:网页设计

网页使用iframe嵌入自适应的百度地图的方法,地图是百度地图API的自定义地图,具体实现方法如下,文中附近示例下载。

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

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

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

  1. <!--百度地图容器--> 
  2.  
  3. <div id="dituContent"></div> 
  4.  
  5. <style type="text/css"
  6.  
  7.     #dituContent{position: absolute;width:99%;height: 98%;} 
  8.  
  9.     @media screen and (max-width: 640px) { 
  10.  
  11.         #dituContent{width:98%;height: 97%;} 
  12.  
  13.     } 
  14.  
  15. </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接口,标题、文字内容、经度纬度根据需要自行修改即可。

    打赏是您对我们最大的鼓励!

    扫一扫打赏
    相关评论

    评论列表(条)

      ×
      QQ在线客服

      服务中心

      zfzf