0
我有兩個網站，其試圖在一個區域上顯示地圖一個森林大火的，使用谷歌地圖的javascript API和從NSW RFS一個GeoJSON的。兩者都是有抵制力的網站。 的地圖似乎有關顯示實際的地圖背景非常顛簸，並且在一個情況下，我總是得到一個灰色的背景（雖然標記等均正常顯示）。Resposive谷歌地圖的JavaScript API原來灰色（有時）
這似乎是與地圖畫布的大小的方式;如果設置了固定的寬度和高度，則一切正常，但如果使用％，則會顯示灰色。在一種情況下，設置vw（視口寬度的百分比）中的寬度和高度起作用，但在另一種情況下不起作用。 ，工程該網站是http://lansdowne.rfsa.org.au/firemap.php 那不就是http://www.upperlansdownehall.org.au/firemap/的一個 - 如果你ZOON出較大的區域ytou將看到標記出現在兩個地圖。
的主要區別在於，一個是WordPress的，與頁腳排隊的JavaScript，而另一種是在HTML嵌入。
我試着在initsize例程中或在addDomListener（window，'load'）之前使用下面的代碼在js（或者一個封閉區域）中設置map-canvas的大小（寬度和高度） ，初始化）;
var mw = document.getElementById('map-canvasout').offsetWidth;
var mw = document.documentElement.clientWidth * .5;
var mh = mw * .75;
var mhx = mh + "px";
var mapara = document.getElementById('map-canvasout');
mapara.style.height= mhx;
我會非常感謝任何想法，因爲我離開了他們。爲WordPress的腳本代碼進行編碼和JS如下： -
ADD_ACTION（ 'wp_enqueue_scripts'， 'ulmh_googlemaps'，105）;
function ulmh_googlemaps(){
if (is_page('32') || is_page('233')) {
wp_register_script('gmap', 'https://maps.googleapis.com/maps/api/js?key=AIzaSyBAlriyR-tmJU4jrd0z9nmWEmw4XSS0nC0',true);
wp_register_script('ulmh_gmap', plugins_url('firemap.js', __FILE__),true);
wp_enqueue_script('gmap');
wp_enqueue_script('ulmh_gmap');
}
}
function initialize() {
var lat = -31.71 ;
var lng = 152.47;
var zom = 12;
var nam = "Upper Lansdowne";
var mapOptions = {
center: { lat: lat, lng: lng},
zoom: zom
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
map.data.loadGeoJson('http://www.upperlansdownehall.org.au/wp-content/uploads/majorIncidents.json');
map.data.setStyle(function(feature) {
var IconBase = 'http://www.rfs.nsw.gov.au/_designs/geojson/fires-near-me/images/';
var image = {
url: IconBase + 'watch-and-act.png',
size: new google.maps.Size(27, 27),
origin: new google.maps.Point(0,0),
anchor: new google.maps.Point(14, 13)
};
var ctg = feature.getProperty('category');
switch (ctg) {
case "Emergency Warning": image.url = IconBase + 'emergency-warning.png'; break;
case "Watch and Act": image.url = IconBase + 'watch-and-act.png'; break;
case "Advice": image.url = IconBase + 'advice.png'; break;
default: image.url = IconBase + 'not-applicable.png';
}
return {
icon: image
};
});
var infowindow = new google.maps.InfoWindow();
map.data.addListener('click', function(event) {
var ef = event.feature;
var myHTML = '<b>'+ef.getProperty("title") + '</b></br>' + ef.getProperty("description");
infowindow.setContent("<div style='width:250px;'>"+myHTML+"</div>");
infowindow.setPosition(event.latLng);
infowindow.setOptions({pixelOffset: new google.maps.Size(0,0)});
infowindow.open(map);
});
nam = 'Fire Map of the ' + nam + ' Area';
lat = Math.round(lat*10000)/10000;
lng = Math.round(lng*10000)/10000;
google.maps.event.addListener(map, 'idle', function() { // 'bounds_changed'
google.maps.event.trigger(map, 'resize');
var mapbnd = map.getBounds();
var nbrfre = 0;
map.data.forEach(function(feature) {
var geo = feature.getGeometry();
if (geo.getType() == 'Point') {
var LatLng = geo.get();
if (mapbnd.contains(LatLng)) {
nbrfre = nbrfre +1;
}
} else if (geo.getType() == 'GeometryCollection') {
var LatLng = geo.getAt(0).get();
console.log(LatLng);
if (mapbnd.contains(LatLng)) {
nbrfre = nbrfre +1;
}
}
});
var fretxt = ' (No Fires)';
if (nbrfre == 1) {
fretxt = ' (1 Fire)';
} else if (nbrfre > 1) {
fretxt = ' (' + nbrfre + ' Fires)';
}
var ctr = map.getCenter();
clt = Math.round(ctr.lat()*10000)/10000;
cln = Math.round(ctr.lng()*10000)/10000;
if ((clt != lat) || (cln != lng) ||(zom != map.getZoom())) {
nn = 'General Fire Map';
} else {
nn = nam;
}
var pstttl = document.getElementsByClassName("posttitle");
pstttl[0].innerHTML = nn + fretxt;
if (nbrfre != 0) {
pstttl[0].style.backgroundColor='red';
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);