带有中心位置的 Javascript Google 地图 api V3 fitbounds

Question

我想将图钉装订到用户位置图钉周围可见。我编写了以下代码，它以用户位置为中心，但很少有图钉超出地图？？

仅供参考：userPinLoc 是已填充的图钉对象

 function setInitialZoom() {
            mapZoom = googleMap.getZoom(); 
            var bounds = new google.maps.LatLngBounds();
            bounds.extend(userPinLoc);
            for (i in nearestEntitiesToZoom) {
                entity = nearestEntitiesToZoom[i];
                var googleLatLng = new google.maps.LatLng(entity.latitude,entity.longitude);
                bounds.extend(googleLatLng);
            }

            google.maps.event.addDomListener(googleMap, 'bounds_changed', function() {
                googleMap.setCenter(userPinLoc);
            });
                 googleMap.fitBounds(bounds);
        }

Answer 1

我不确定你从哪里得到userPinLoc。试一试：

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

// Go through each...
for (i in nearestEntitiesToZoom) {
    entity = nearestEntitiesToZoom[i];
    var googleLatLng = new google.maps.LatLng(entity.latitude, entity.longitude);
    bounds.extend(googleLatLng);
};

// Fit these bounds to the map
googleMap.fitBounds(bounds);
...

请记住，fitCenter 或 fitBounds 需要一个 LatLng 对象作为参数。

此代码改编自：http://you.arenot.me/2010/06/29/google-maps-api-v3-0-multiple-markers-multiple-infowindows/

Answer 2

我是用 java 和 javascript 做的

public static void calculateMapFitBounds(GeoLocation userLocation, List<GeoLocation> contents, Map<String, GeoLocation> latlngBounds){

    if (Util.isEmtpyGeoLocation(userLocation) || contents == null || contents.isEmpty()) {
        return;
    }

    //SW
    double minLat = userLocation.getLatitude();
    double minLng = userLocation.getLongitude();

    //NE
    double maxLat = userLocation.getLatitude();
    double maxLng = userLocation.getLongitude();

    for(GeoLocation content: contents){

        /*
         * Populating Top left cordinate (SW)
         */
        minLat = Math.min(minLat, content.getLatitude());
        minLng = Math.min(minLng, content.getLongitude());

        /*
         * Populating Bottom right cordinate (NE)
         */
        maxLng = Math.max(maxLng, content.getLongitude()) ;
        maxLat = Math.max(maxLat, content.getLatitude());
    }

    /*
     * Calculating Delta fit bounds
     */

    double latDelta = Math.max(Math.abs(userLocation.getLatitude() - minLat), Math.abs(maxLat-userLocation.getLatitude()));

    double lngDelta = Math.max(Math.abs(userLocation.getLongitude() - maxLng), Math.abs(minLng - userLocation.getLongitude()));

    //Calculating SW
    minLat = userLocation.getLatitude() - latDelta;
    minLng = userLocation.getLongitude()- lngDelta;


    latlngBounds.put("swLatLng", new GeoLocation(minLat, minLng));


    //Calculating NE
    maxLat = userLocation.getLatitude() + latDelta;
    maxLng = userLocation.getLongitude()+ lngDelta;

    latlngBounds.put("neLatLng", new GeoLocation(maxLat, maxLng));

}

我正在使用速度视图，所以这里是速度和 js 代码

#if($swLatLng && $neLatLng)
        var swLatLn = new google.maps.LatLng($!swLatLng.latitude, $!swLatLng.longitude, false);
        var neLatLn = new google.maps.LatLng($neLatLng.latitude, $neLatLng.longitude, false);

        var bounds = new google.maps.LatLngBounds(swLatLn, neLatLn);
        googleMap.fitBounds(bounds);

        #end

Answer 3

当我之前完成此操作时，我已将地图中心的 bounds.extend() 作为最后一个，而不是第一个。出于某种原因，这似乎效果更好。

function initialize() {
    var points = [
        {
            lat: 51.498725,
            lng: -0.17312
        },
        {
            lat: 51.4754091676,
            lng: -0.186810493469
        },
        {
            lat: 51.4996066187,
            lng: -0.113682746887
        },
        {
            lat: 51.51531272,
            lng: -0.176296234131
        }
    ];

    var centerLatLng = {lat: 51.532315, lng: -0.1544};

    var map = new google.maps.Map(document.getElementById("map"), {
        zoom:               15,
        center:             centerLatLng,
        mapTypeId:          google.maps.MapTypeId.ROADMAP
    });

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

    var homeMarker = new google.maps.Marker({
        position: centerLatLng,
        map: map,
        icon: "http://maps.google.com/mapfiles/ms/micons/green-dot.png"
    });

    for (var i = 0; i < points.length; i++) {       
        var marker = new google.maps.Marker({
            position: points[i],
            map: map
        });

        bounds.extend(points[i]);
    }

    bounds.extend(centerLatLng);

    map.fitBounds(bounds);
}