带有Yii的Openstreet地图的渲染问题

Question

我以前用jquery和Yii及其渲染方式遇到问题。

使用以下代码：

<div id="mapdiv" height="1000" width="1000"></div>
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>

<script>
var mainLonLat = [0.166081 ,38.789011];

map = new OpenLayers.Map("mapdiv");
map.addLayer(new OpenLayers.Layer.OSM());

epsg4326 =  new OpenLayers.Projection("EPSG:4326"); //WGS 1984 projection
projectTo = map.getProjectionObject(); //The map projection (Spherical Mercator)

var lonLat = new OpenLayers.LonLat(  0.166081 ,38.789011 ).transform(epsg4326, projectTo);

var zoom=14;
map.setCenter (lonLat, zoom);

var mastsOneK = [new OpenLayers.LonLat(0.154539,38.738778)];

//Create the Circle
circleLayer = new OpenLayers.Layer.Vector("circleLayer");

circleLayer.addFeatures(createCircle());

function createCircle()
{
    var x = 0;
    var extent = map.getExtent();
    var features = [];
    while(x < mastsOneK.length)
    {
      var threeKStyle = {
      strokeWidth: 1,
      strokeColor: '#FF6600',
      fill: 1,
      fillColor: '#FF6600',
      fillOpacity: 0.4,
      strokeOpacity: 0.4,
     };

      var newThreeK = new OpenLayers.Feature.Vector(
      new OpenLayers.Geometry.Polygon.createRegularPolygon(
  new OpenLayers.Geometry.Point(mastsOneK[x].lon,mastsOneK[x].lat).transform(
  epsg4326, projectTo),
  2000,
  40),"",threeKStyle);

      features.push(newThreeK);

      x++;
    }
    return features;
}

map.addLayer(circleLayer);
</script>

我仅使用标准的html页面就能获得一个显示单个圆圈的地图，这是理想的结果。 但是，当使用相同的代码并将其粘贴到Yii视图中时。 该地图不会出现。 我得到一个空白的白色区域，该区域应该是地图。

如果我使用chrome inspector并为元素设置了高度和宽度（我之前已经为元素设置了宽度和高度，并且这没有区别），那么我可以开始看到地图的一部分了。

如果然后我放大页面，则完整地图将按预期显示。

我试图做各种变通办法，例如调整大小，重新绘制，刷新图像等。使用下面的代码，例如：

$("#mapdiv").resize();


$.fn.redraw = function(){
  $(this).each(function(){
    var redraw = this.offsetHeight;
  });
};


$('#mapdiv').redraw();

但是，地图仍未显示。 如果在文档开始处删除DOCTYPE标记，就很奇怪了，那么地图就会出现，但是显然这会引起许多其他问题。

有人能说明为什么会这样吗，以及当我用完我手头的每一个片段都无济于事时，他们可能遇到的任何可能的修复方法。

类似地，当使用highcharts扩展并尝试在选项卡中呈现图表时，我也遇到一个问题，即需要放大/缩小才能看到图表，我不禁认为上述解决方案就是解决方案对此也。

任何帮助表示赞赏。

Answer 1

当初始化后包含的元素大小发生更改时，您可能必须手动调用map.updateSize() （ http://dev.openlayers.org/apidocs/files/OpenLayers/Map-js.html#OpenLayers.Map.updateSize ）。