今天尝试将几个geoJSON数据加载到map.data中,但出于某种原因,某些点已从地图中删除:http://screencast.com/t/6Aw5Jijcwq
谷歌地图api只使用1层,如果这些点与另一个形状重叠,它会被删除吗?
以下是我使用的代码:
<!DOCTYPE html>
<html>
<head>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
var map;
var boundsString;
var jqXHR = null;
var layers = new Array();
/*function callback(resultGeoJson) {
map.data.addGeoJson(resultGeoJson);
}*/
function initialize() {
// Create a simple map.
map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 12,
center: { lat: 58.0257285679743, lng: -122.88298941015626 }
});
// Adding needed layers on the map
layers.push({ tableName: 'nts_grid_blocks', minZoom: 10, maxZoom: 100, dataStyle: { fillColor: 'green', strokeWeight: 1 }});
layers.push({ tableName: 'facilities', minZoom: 10, maxZoom: 100, dataStyle: { fillColor: 'green' } });
google.maps.event.addListener(map, 'idle', function(){
// Populating bounds of the map to pull need geometry objects from the server
var bounds = map.getBounds();
var latRightTop = bounds.getNorthEast().lat();
var longRightTop = bounds.getNorthEast().lng();
var latLeftBottom = bounds.getSouthWest().lat();
var longLeftBottom = bounds.getSouthWest().lng();
boundsString = 'POLYGON ((' +
longRightTop + ' ' + latRightTop + ', ' + // Right top
longLeftBottom + ' ' + latRightTop + ', ' + // Right bottom
longLeftBottom + ' ' + latLeftBottom + ', ' + // Left bottom
longRightTop + ' ' + latLeftBottom + ', ' + // Left top
longRightTop + ' ' + latRightTop + // Right top
'))';
if (jqXHR != null) {
jqXHR.abort();
}
// Remove previously added features
map.data.forEach(function (feature) {
map.data.remove(feature);
});
// Fill layers on the map
for (var layerIndex = 0; layerIndex < layers.length; layerIndex++) {
var layer = layers[layerIndex];
console.log(boundsString);
var currentZoom = map.getZoom();
console.log('current zoom: ' + currentZoom);
if (currentZoom >= layer.minZoom && currentZoom <= layer.maxZoom) {
jqXHR = $.ajax(
{
contentType: "application/json",
dataType: 'jsonp',
crossDomain: true,
jsonpCallback: 'callback',
url: 'https://jacscantelematics.appspot.com/tables/shapesdb:' + layer.tableName + '/features?intersects=' + boundsString,
success: function (response) {
jqXHR = null;
map.data.setStyle(layer.dataStyle);
map.data.addGeoJson(response); // THIS PLACE DOESN'T WORK. IT OVERRIDES PREVIOUSLY ADDED RESULTS FROM "facilities" layer (since it executes faster)
},
type: 'GET'
});
}
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas" style="width: 1000px; height: 1000px;"></div>
</body>
</html>
也许我们不能两次使用map.data.addGeoJson?