Question

我有两个网站尝试使用Google Maps javascript api和NSW RFS的GeoJson显示区域内的丛林火灾地图。两者都是重复使用的网站。这些地图在显示实际的地图背景时显得非常抽搐，在一种情况下，我总是得到一个灰色背景（虽然标记等正确显示）。

这似乎与地图画布的大小相关;如果设置了固定的宽度和高度，那么一切都很好，但如果使用％，则显示灰色。在一种情况下，设置宽度和高度以vw（视口宽度的百分比）起作用，但在另一种情况下它不起作用。有效的网站是http://lansdowne.rfsa.org.au/firemap.php 没有的是http://www.upperlansdownehall.org.au/firemap/ - 如果你突然到更大的区域，你会看到两个地图中都出现了标记。

主要区别在于一个是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);

Answer 1

好吧，看来我的无意识在这方面比我其他人更好，因为我今天早上醒来时得到了部分答案。一个站点使用的是谷歌地图的实验版本（默认情况下），而另一个站点指定v = 3，因此得到了发布版本。当然，这引发了谷歌目前正在发生的事情的问题，但我会跟他们一起追逐。感谢任何看过这个问题的人。

Resposive Google Maps javascript api结果为灰色（有时）

1 个答案: