使用 GeoJson GoogleMaps Api v3 缩放到标记

Posted 2023-02-23

【中文标题】使用 GeoJson GoogleMaps Api v3 缩放到标记

【英文标题】：Zoom to Markers using GeoJson GoogleMaps Api v3

【发布时间】：2014-06-22 16:46:09

【问题描述】：

我正在尝试将我的视图设置为我加载的 geojson 数据。有什么提示吗？

到目前为止，这是我的代码：

<script>
//Load Map
    var map;
    function initialize() 
      map = new google.maps.Map(document.getElementById('map-canvas'), 
        center: new google.maps.LatLng(0, 0),
        zoom: 2
        );
        map.data.loadGeoJson('Points.geojson');
    
    google.maps.event.addDomListener(window, 'load', initialize);

//Json to Array
var myMarkers;
    $.getJSON('Points.geojson')
    .done(function (data) 
    myMarkers = data;
    );
</script>

如您所见，我已经将 Json 加载到了一个数组中 - 但我不确定如何获取边界。在我的搜索过程中，我总是来到这个页面：http://blog.shamess.info/2009/09/29/zoom-to-fit-all-markers-on-google-maps-api-v3/，但不幸的是我刚刚开始使用 javascript，我无法修改我的代码。

这就是我的 Geojson 的样子：

    "type": "FeatureCollection",
    "features": [
        "type": "Feature",
        "properties": 
            "Name": "SiteA",
            "Adresse": "Adress1",
            "Hausnummer": 1,
            "Postleitzahl": 1000,
            "Ort": "Here",
            "Long": 10,
            "Lat": 50
        ,
        "geometry": 
            "type": "Point",
            "coordinates": [10, 50]
        
    , 
        "type": "Feature",
        "properties": 
            "Name": "SiteB",
            "Adresse": "Adress2:",
            "Hausnummer": 2,
            "Postleitzahl": 1001,
            "Ort": "There",
            "Long": 5,
            "Lat": 60
        ,
        "geometry": 
            "type": "Point",
            "coordinates": [5, 60]
        
    ]

提前致谢！

【参考方案1】：

你得到了三个点，所以在一个循环中你将它们扩展到一个 LatLngBounds like here 然后尝试 fitbounds

var bounds = new google.maps.LatLngBounds();


for (var i = 0; i < data.features.length; ii++) 
            a = data.features[i].geometry.coordinates[0];
            b = data.features[i].geometry.coordinates[1];
            point = new google.maps.LatLng(a, b);
            bounds.extend(point);
        


map.fitBounds(bounds)

【讨论】：

小错字，它是map.fitBounds()，当然不会像type: "LineString"那样工作，因为坐标也有一个数组。