0
我以前有jquery和Yii以及它如何呈現的問題。使用下面的代碼Yii的Openstreet地圖渲染問題
：
<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標籤，那麼地圖就會出現，但顯然這會導致很多其他問題。
有沒有人能說明爲什麼會發生這種情況，以及他們可能遇到的任何潛在問題，因爲我已經使用了每一個片段，但我沒有得到任何答案。
同樣，當使用highcharts擴展並試圖在選項卡中呈現圖表時，我也會遇到需要放大/縮小以查看圖表的問題，我不禁想到上述解決方案這也是解決方案。
任何幫助表示讚賞。