2

我在 javascript 和调试方面很糟糕（php 是我的最爱）。我动态生成一个列表以显示在地图上，现在我需要找到坐标的中心，然后缩小以显示所有坐标。这是我使用的代码，是从另一个 SO 成员那里找到的。

    var map = null;
    var markerArray = []; //create a global array to store markers
    var locations = [
        ['Bondi Beach', -33.890542, 151.274856, 4, 'http://www.kjftw.com/sandbox/gmap/images/icons/numeric/red04.png'],
        ['Coogee Beach', -33.923036, 151.259052, 5, 'http://www.kjftw.com/sandbox/gmap/images/icons/numeric/red05.png'],
        ['Cronulla Beach', -34.028249, 151.157507, 3, 'http://www.kjftw.com/sandbox/gmap/images/icons/numeric/red03.png'],
        ['Manly Beach', -33.80010128657071, 151.28747820854187, 2, 'http://www.kjftw.com/sandbox/gmap/images/icons/numeric/red02.png'],
        ['Maroubra Beach', -33.950198, 187.259302, 1, 'http://www.kjftw.com/sandbox/gmap/images/icons/numeric/red01.png']];

    function initialize() {
        var myOptions = {
            zoom: 10,
            center: new google.maps.LatLng(-33.80010128657071, 151.28747820854187),
            mapTypeControl: true,
            mapTypeControlOptions: {
                style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
            },
            navigationControl: true,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

        google.maps.event.addListener(map, 'click', function() {
            infowindow.close();
        });

        // Add markers to the map
        // Set up markers based on the number of elements within the myPoints array
        for (var i = 0; i < locations.length; i++) {
            createMarker(new google.maps.LatLng(locations[i][1], locations[i][2]),locations[i][0], locations[i][3], locations[i][4]);
        }

        mc.addMarkers(markerArray, true);
    }

    var infowindow = new google.maps.InfoWindow({
        size: new google.maps.Size(150, 50)
    });

    function createMarker(latlng, myTitle, myNum, myIcon) {
        var contentString = myTitle;
        var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            icon: myIcon,
            zIndex: Math.round(latlng.lat() * -100000) << 5,
            title: myTitle
        });

        google.maps.event.addListener(marker, 'click', function() {
            infowindow.setContent(contentString);
            infowindow.open(map, marker);
        });

        markerArray.push(marker); //push local var marker into global array
    }

    window.onload = initialize;

看来这是所需的功能（在答案中找到）Google Maps API：计算折线的中心/缩放， 但我不知道如何实现它。

4

1 回答 1

4

尝试将该解决方案应用于您的initialize函数，如下所示：

function initialize() {

    ...

    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    google.maps.event.addListener(map, 'click', function() {
        infowindow.close();
    });

    // instantiate the bounds object
    var bounds = new google.maps.LatLngBounds();

    // Add markers to the map
    // Set up markers based on the number of elements within the myPoints array
    for (var i = 0; i < locations.length; i++) {
        var locationLatLng = new google.maps.LatLng(locations[i][1], locations[i][2]);

        createMarker(locationLatLng,
                     locations[i][0], 
                     locations[i][3], 
                     locations[i][4]);

        bounds.extend(locationLatLng);
    }

    map.fitBounds(bounds);

    ...
}

希望这可以帮助

于 2012-05-14T03:41:24.483 回答