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 に答える