在导入新的 geoJSON 数据并创建新对象之前,我正在尝试清除所有多边形对象。我似乎无法让 setMap(null) 函数正常工作。希望有人可以让我知道我失败的地方。
谢谢
var map;
function removeAllMarkers(){// removes all markers from map
//console.log(data);
for( var i = 0; i < data.length; i++ ){
delpolygon = new google.maps.Poly({
position: data[i]
})
delpoly.setMap(null)
}
data.length = 0;
//markersInfoArray.length = 0;
};
// ajax request to load json data
var data;
function pullNewData () {
var newRequest = new XMLHttpRequest();
newRequest.open('GET', 'json_template.json', true);
newRequest.onload = function() {
//data = eval("(" + xhr.responseText + ")")
data = JSON.parse(newRequest.responseText)
console.log(data);
sector_callback(data);
removeAllMarkers(data);
};
newRequest.send();
};
//setInterval(pullNewData,5000);
// function to load map into body when page loads
function initialize() {
var kansas_city = new google.maps.LatLng(39.316858,-94.963194);
var mapOptions = {
zoom: 13,
center: kansas_city,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
}
// ajax request to load json data
var data;
var xhr = new XMLHttpRequest();
xhr.open('GET', 'json_template.json', true);
xhr.onload = function() {
//data = eval("(" + xhr.responseText + ")")
data = JSON.parse(xhr.responseText)
//console.log(data);
sector_callback(data);
};
xhr.send();
function createClickablePoly(poly, html) {
google.maps.event.addListener(poly, 'click', function(evt) {
infowindow.setContent(html);
infowindow.setPosition(evt.latLng);
infowindow.open(map);
});
}
var infowindow = new google.maps.InfoWindow({});
var allPolygons = [];
function sector_callback() {
var bounds = new google.maps.LatLngBounds();
for (var i = 0, len = data.features.length; i < len; i++) {
var coords = data.features[i].geometry.coordinates[0];
siteNames = data.features[i].properties.Name; // added for site names
var path = [];
//console.log(siteNames);
//console.log(coords);
for ( var j = 0, len2 = coords.length; j < len2; j++ ){ // pull out each set of coords and create a map object
var pt = new google.maps.LatLng(coords[j][1], coords[j][0])
bounds.extend(pt);
path.push(pt);
//path.push(new google.maps.LatLng(coords[j][1], coords[j][0]));
}
var polygons = new google.maps.Polygon({
path: path,
strokeColor: "#000000",
strokeOpacity: 0.8,
strokeWeight: 1,
fillColor: "#000000",
fillOpacity: 0.35,
map: map
});
createClickablePoly(polygons, siteNames);
google.maps.event.addListener(polygons, 'mouseover', function() {
var currentPolygon = this;
currentPolygon.setOptions({ // setOptions is a method and properties below
fillOpacity: 0.45,
fillColor: "#FF0000"
})
});
google.maps.event.addListener(polygons, 'mouseout', function() {
var currentPolygon = this;
currentPolygon.setOptions({
fillOpacity: 0.35,
fillColor: "#000000"
})
});
allPolygons.push(polygons);
}
}
console.log(allPolygons);