Question

尝试在页面上以宽度：100％显示地图。当我在html中指定大小时

<div id="mapquest" style="width:400px; height:400px">
</div>

div充满了甜蜜的地图，没有任何问题。但是当我尝试用百分比指定它时：

<div id="mapquest" style="width:100%; height:auto"> <!--or height:100%, or even height:400px>-->
</div>

在这种情况下，控制台将div的宽度记录为父容器的宽度，但高度为0。

当我尝试在外部CSS样式表中分配相同的元素样式属性时，也会发生这种情况。在我进行故障排除的另一个小时之前，我想知道是否有一个已知的原因，它不想工作。

3 个答案:

答案 0 :(得分：0)

答案 1 :(得分：0)

答案 2 :(得分：0)

Answer 1

所以问题是Mapquest在这种情况下返回的对象

(function(){

MQA.EventUtil.observe(window, 'load', function() {

    /*Create an object for options*/
    var mqopts={
      elt:document.getElementById('mapquest'),  /*ID of element on the page where you want the map added*/
      zoom:20,                                  /*initial zoom level of the map*/
      latLng:{lat:39.743943, lng:-105.020089},  /*center of map in latitude/longitude */
      mtype:'map',                              /*map type (map)*/
      bestFitMargin:0,                          /*margin offset from the map viewport when applying a bestfit on shapes*/
      zoomOnDoubleClick:true                    /*zoom in when double-clicking on map*/
    };

    /*Construct an instance of MQA.TileMap with the options object*/
    window.mapquest = new MQA.TileMap(mqopts);
    });
})();

将div的位置更改为relative，并且需要px中的size参数，默认值为0.我的理解是，因为它是在加载时传递给元素的最后一个样式参数，所以它会覆盖任何前面的样式。现在已知问题了。

Answer 2

使用外部css文件来加速加载时间，而不是内联样式。

现在回答：将高度宽度属性添加到该ID。

<强> HTML

 <div id="mapquest"></div>

<强> CSS

#mapquest{
    width:400px;/* pixel or percentage */
    height:400px;/* pixel or percentage */
}

Answer 3

您使用的是哪个版本的MapQuest JavaScript API？版本7.1（最新版本 - 几周前发布）有一些与CSS样式相关的调整，覆盖了Twitter引导程序等其他流行的库，所以请检查它是否能解决手头的问题：http://developer.mapquest.com/web/documentation/sdk/javascript/v7.1

免责声明：我在MapQuest工作。虽然我们没有明确支持第三方库，但我知道7.1有一些与CSS相关的更改，所以这个可能对你有帮助吗？

使用百分比来调整div时，不会显示Mapquest窗口

3 个答案: