使用 Yii 渲染 Openstreet 地图的问题答案

【问题标题】：Rendering Issue for Openstreet Maps with Yii使用 Yii 渲染 Openstreet 地图的问题
【发布时间】：2014-09-23 07:41:32
【问题描述】：

我之前遇到过关于 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 检查器并为元素设置了高度和宽度（我之前已经为元素设置了宽度和高度，这并没有什么区别），我可以开始看到地图的一部分。

如果我随后放大页面，完整的地图就会按预期显示。

我尝试过各种变通方法，例如调整大小、重绘、刷新图像等。使用下面的代码以及更多示例：

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


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


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

但是地图仍然没有显示。奇怪的是，如果我删除文档开头的 DOCTYPE 标签，然后地图就会出现，但显然这会导致许多其他问题。

任何人都可以提出为什么会发生这种情况以及他们可能遇到的任何潜在修复，因为我已经使用了我手上的每一个 sn-p，但无济于事。

类似地，当使用 highcharts 扩展并尝试在选项卡中呈现图表时，我也会遇到需要放大/缩小才能查看图表的问题，我不禁认为上述解决方案将也可以解决这个问题。

感谢任何帮助。

【问题讨论】：

标签： javascript php jquery yii

【解决方案1】：

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

【讨论】：