Google地图未居中和缩放标记

Question

All of my markers are coming from an AJAX call and are accurately placed on the map. However, the initial view is fully zoomed out, along the equator, in North America.

I know the solution lays somewhere with bounds.extend and map.fitBounds but apparently I'm doing it wrong.

I've always had an issue with this, so hopefully someone can help elevate this thorn in my side:

var map;
var markers = [];
var home_marker;

function initialize() {

    // Display a map on the page
    if ( document.contains(document.getElementById("map_canvas")) ) {

        bounds = new google.maps.LatLngBounds();
        map = new google.maps.Map(document.getElementById("map_canvas"), {
            zoom: 12,
            center: new google.maps.LatLng(48.4222, -123.3657)
        });

        // a new Info Window is created
        infoWindow = new google.maps.InfoWindow();

        // Event that closes the InfoWindow with a click on the map
        google.maps.event.addListener(map, 'click', function() {
            infoWindow.close();
        });

        // Add Home Marker
        home_marker = new google.maps.Marker({
            position: new google.maps.LatLng(user_address_lat, user_address_lng),
            map: map,
            icon: '/images/map-icon-your-home.png'
        });

    }

}

function displayMarkers( properties ) {

    // this variable sets the map bounds and zoom level according to markers position
    var bounds = new google.maps.LatLngBounds();

    // For loop that runs through the info on markersData making it possible to createMarker function to create the markers
    for (var i = 0; i < properties.length; i++){

        var latlng = new google.maps.LatLng(properties[i]['latitude'], properties[i]['longitude']);
        var price_current = properties[i]['price_current'];
        var bedrooms = properties[i]['bedrooms'];
        var total_baths = properties[i]['total_baths'];
        var listing_id = properties[i]['listing_id'];

        createMarker( latlng, price_current, bedrooms, total_baths, matrix_unique_ID );

        // Marker’s Lat. and Lng. values are added to bounds variable
        bounds.extend(latlng);

    }

    // Finally the bounds variable is used to set the map bounds
    // with API’s fitBounds() function
    map.fitBounds(bounds);
}

function createMarker( latlng, price, bedrooms, bathrooms, matrix_id ) {

    var formatted_price = accounting.formatMoney(price, '$', 0);

    var marker = new google.maps.Marker({
        map: map,
        position: latlng,
        icon: '/images/map-icon.png'
    });

    google.maps.event.addListener(marker, 'click', function() {

        // Variable to define the HTML content to be inserted in the infowindow
        var iwContent = '<div class="row"><div class="small-12 columns"><img src="http://www.mywebsite.com/properties/'+listing_id+'/image-'+matrix_id+'-1.jpg"></div></div>' +
                        '<div class="row"><div class="small-12 columns"><p class="price-current text-center">'+formatted_price+'</p></div></div><hr>' +
                        '<div class="row"><div class="small-6 columns"><p class="bedrooms"><span class="fw-semi-bold">Beds:</span> '+bedrooms+'</p></div>' +
                        '<div class="small-6 columns"><p class="total-baths"><span class="fw-semi-bold">Baths:</span> '+bathrooms+'</p></div></div>';

        // including content to the infowindow
        infoWindow.setContent(iwContent);

        // opening the infowindow in the current map and at the current marker location
        infoWindow.open(map, marker);

    });

}

// Sets the map on all markers in the array.
function setMapOnAll(map) {
    for (var i = 0; i < markers.length; i++) {
        markers[i].setMap(map);
    }
}

// Removes the markers from the map, but keeps them in the array.
function clearMarkers() {
    setMapOnAll(null);
}

// Deletes all markers in the array by removing references to them.
function deleteMarkers() {
    clearMarkers();
    markers = [];
}

Answer 1

为您的脚本制作一个新零件或制作一个新零件，并对其进行特定编码以更改相机的放大倍数，并为其添加ui按钮。