當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
关于ArcGIS JS API中的map高度为400px的问题解决
生活随笔
收集整理的這篇文章主要介紹了
关于ArcGIS JS API中的map高度为400px的问题解决
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
文章目錄
- 問題現象
- 原因分析
- 解決方法
- 問題總結
問題現象
使用ArcGIS JavaScript API V3.27創建了一個最簡單的地圖頁面，創建map對象時給傳入了一個div，樣式設的是寬高均為100%，但是在瀏覽器看到的是地圖高度只有400px。
代碼片段
<style>#map{ height: 100%; width: 100%;}</style><script>var map;require(["esri/map", "dojo/domReady!"], function(Map,) {map = new Map("map", {basemap: "topo",center: [-116.093, 34.218],zoom: 7});});</script></head><body><div id="map"> </div></body>截圖
原因分析
在GeoNet上看到esri員工的一個回答：
400px is the default size of the map container.
其實原因就出在設置的div屬性：#map{width:100%;height:100%} ,雖然設置的是100%但由于其父級元素未設置寬高屬性，導致mapdiv的實際高度為0,因此地圖高度采用默認值400px。說到底還是不懂HTML基礎。
解決方法
找到問題原因就好解決了，只要把 map 的所有父級元素寬高屬性設置一下就行了。
代碼片段
<style>html,body{height:100%;width:100%}#map{ height: 100%; width: 100%;} </style>效果截圖
問題總結
其實對于這個頁面來說，還有一個解決辦法，不用設置html,body的屬性，只需要給 #map 加一個屬性 position:absolute ,該場景下是可以實現地圖鋪滿的。其主要利用的是元素絕對定位時會去找除 {position:static} 之外的父級包含塊。在該例子中是找不到這種父元素的（也就是無依賴絕對定位），則其包含塊就是初始包含塊（瀏覽器視口）。因此*#map* 就有了實際的高度值(即瀏覽器視口高度值)，創建出的地圖高度就不會采用默認的400px。
參考鏈接：https://www.jianshu.com/p/b4e656a7c179
總結
以上是生活随笔為你收集整理的关于ArcGIS JS API中的map高度为400px的问题解决的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Difference between e
- 下一篇： 基于ArcGIS JS API实现垂直滑