Question

我的所有标记都来自AJAX调用，并准确放置在地图上。但是，初始视图在北美沿着赤道完全缩小。

我知道解决方案位于bounds.extend和map.fitBounds的某处，但显然我做错了。

我总是遇到这个问题，所以希望有人可以帮助提升我这方面的刺：

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按钮。

谷歌地图没有居中和缩放标记

1 个答案: