zoom to geojson polygons bounds в API Карт Google v3

Question

Я загружаю geojson из базы данных Postgis и хочу отобразить его на моей карте. После рисования многоугольника, я хочу, чтобы карта увеличивала масштаб до расширенного многоугольника.

Мои данные загружаются нормально и отображаются на карте корректно, но я не могу понять, как получить границы и изменить масштаб на вновь добавленный многоугольник. Я попытался использовать части кода от Data Layer: Drag and Drop GeoJSON example,, , но отображаемые карты масштабируются где-то в Тихом океане рядом с островами Бейкер, а полигон отображается правильно в Люксембурге.

Вот код, я использую:

window.addEventListener("load", func1); 

function func1(){ 
    //Load mapdata via geoJson 
    var parzelle = new google.maps.Data(); 
    parzelle.loadGeoJson("./mapdata/get_parzelle_geojson.php<?php echo "?gid=".$_GET['gid'];?>"); 

    // Set the stroke width, and fill color for each polygon 
    var featureStyle = { 
    fillColor: '#ADFF2F', 
    fillOpacity: 0.1, 
    strokeColor: '#ADFF2F', 
    strokeWeight: 1 
    } 

    parzelle.setStyle(featureStyle); 
    parzelle.setMap(map); 

    zoom(map); 
} 

function zoom(map) { 
    var bounds = new google.maps.LatLngBounds(); 
    map.data.forEach(function(feature) { 
    processPoints(feature.getGeometry(), bounds.extend, bounds); 
    }); 
    map.fitBounds(bounds); 
} 

function processPoints(geometry, callback, thisArg) { 
    if (geometry instanceof google.maps.LatLng) { 
    callback.call(thisArg, geometry); 
    } else if (geometry instanceof google.maps.Data.Point) { 
    callback.call(thisArg, geometry.get()); 
    } else { 
    geometry.getArray().forEach(function(g) { 
     processPoints(g, callback, thisArg); 
    }); 
    } 
} 

Есть ли способ, чтобы получить, чтобы работать? По-видимому, нет простого способа получить границы полигонов в google.maps.data-layers.

Answer 1

Есть проблемы с вашим кодом. Вы можете использовать map.data для доступа к слою данных.

Рабочий фрагмент кода. Первоначально масштабирует все функции в GeoJSON. Масштабирование каждого отдельного полигона при щелчке.

window.addEventListener("load", func1); 
 
var map; 
 

 
function func1() { 
 
    map = new google.maps.Map(document.getElementById('map-canvas'), { 
 
    zoom: 4, 
 
    center: { 
 
     lat: 0, 
 
     lng: 0 
 
    } 
 
    }); 
 
    // Set the stroke width, and fill color for each polygon 
 
    var featureStyle = { 
 
    fillColor: '#ADFF2F', 
 
    fillOpacity: 0.1, 
 
    strokeColor: '#ADFF2F', 
 
    strokeWeight: 1 
 
    }; 
 

 
    // zoom to show all the features 
 
    var bounds = new google.maps.LatLngBounds(); 
 
    map.data.addListener('addfeature', function(e) { 
 
    processPoints(e.feature.getGeometry(), bounds.extend, bounds); 
 
    map.fitBounds(bounds); 
 
    }); 
 

 
    // zoom to the clicked feature 
 
    map.data.addListener('click', function(e) { 
 
    var bounds = new google.maps.LatLngBounds(); 
 
    processPoints(e.feature.getGeometry(), bounds.extend, bounds); 
 
    map.fitBounds(bounds); 
 
    }); 
 
    //Load mapdata via geoJson 
 
    map.data.loadGeoJson('https://storage.googleapis.com/maps-devrel/google.json'); 
 
} 
 

 
function processPoints(geometry, callback, thisArg) { 
 
    if (geometry instanceof google.maps.LatLng) { 
 
    callback.call(thisArg, geometry); 
 
    } else if (geometry instanceof google.maps.Data.Point) { 
 
    callback.call(thisArg, geometry.get()); 
 
    } else { 
 
    geometry.getArray().forEach(function(g) { 
 
     processPoints(g, callback, thisArg); 
 
    }); 
 
    } 
 
}

html, 
 
body, 
 
#map-canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map-canvas" style="border: 2px solid #3872ac;"></div>

Answer 2

Привет, пожалуйста, попробуйте следующий код, который работал прекрасно, пожалуйста, замените URL с путем GeoJSON файла ..... спасибо & назад ответ

$.ajax({ 
    url: url, 
    dataType: 'JSON', 
    success: function(data) { 
    var lat = {}, lng = {}; 
    $(data.features).each(function(key,feature) { 
     $(feature.geometry.coordinates[0]).each(function(key,val) { 
     lng['max'] = (!lng['max'] || Math.abs(lng['max']) > Math.abs(val[0])) ? val[0] : lng['max']; 
     lng['min'] = (!lng['min'] || Math.abs(lng['min']) < Math.abs(val[0])) ? val[0] : lng['min']; 
     lat['max'] = (!lat['max'] || Math.abs(lat['max']) > Math.abs(val[1])) ? val[1] : lat['max']; 
     lat['min'] = (!lat['min'] || Math.abs(lat['min']) < Math.abs(val[1])) ? val[1] : lat['min']; 
     }); 
    }); 
    var bounds = new google.maps.LatLngBounds(); 
    bounds.extend(new google.maps.LatLng(lat.min - 0.01, lng.min - 0.01)); 
    bounds.extend(new google.maps.LatLng(lat.max - 0.01, lng.max - 0.01)); 
    map.fitBounds(bounds); 
    map.setCenter(bounds.getCenter()); 
    } 
}); 

Answer 3

В Картах API (по крайней мере, начиная с V3.26 сегодня) поддерживает Data.Geometry.prototype.forEachLatLng(), который абстрагирует различные типы Geometry.

Учитывая, что вы уже импортировали ваш GeoJSON в map.data, легко rezoom карты, чтобы соответствовать («подходит к часам»):

var bounds = new google.maps.LatLngBounds(); 
map.data.forEach(function(feature){ 
    feature.getGeometry().forEachLatLng(function(latlng){ 
    bounds.extend(latlng); 
    }); 
}); 

map.fitBounds(bounds); 

Если функции уже итерируемые для другого причины (например, стили настройки), вы можете работать с этим кодом в своем существующем цикле для повышения эффективности.