QQ在線咨詢在線咨詢 幫做網絡積累了豐富的項目經驗,聚集了一批資深專業人才,售后服務一流,內業好評不斷,是一家專業的網站建設服務商。微信:skin2288 專業的網站建設服務商。微信:skin2288 網站建設地圖?|?城市分站

網頁通過iframe嵌入百度地圖API時自適應屏幕

發布時間:2021-06-02 23:14:44??作者:專業網站建設工程師?來源:幫做網絡 瀏覽量:

導??讀:網頁通過iframe嵌入百度地圖API時,如何讓地圖自適應屏幕 1、iframe標簽按照常規響應式的樣式寫就可以了,比如: style type = text/css...
網頁通過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、公司地址坐標獲取

公司地址坐標可以通過百度“拾取坐標系統”獲?。?/p>

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時自適應屏幕

標題、文字內容、經度緯度修改

網頁通過iframe嵌入百度地圖API時自適應屏幕


轉載請注明出處: 首頁 > 知識學堂 > dedecms仿站 > >網頁通過iframe嵌入百度地圖API時自適應屏幕


易中彩票