Question

我正在尝试使用jQuery更新谷歌地图v3，目前它加载地图但是当点击.preview时，地图会缩放到宽度和高度，然后变为灰色。

$('.preview').click(function(){
    var width = $('#width').val();
    var height = $('#height').val();
    $('#map').css({
        'width':width,
        'height':height
    });
    var mapElement = document.getElementById('map');
    var updateOptions = {
        zoom: 6
    }
    var map = new google.maps.Map(mapElement, updateOptions);
});

HTML

<div class="block space" id="map"></div>
<button class="btn preview">Preview</button>

的Javascript

google.maps.event.addDomListener(window, 'load', init);
function init() {
    var mapOptions = {
        zoom: 2,
        center: new google.maps.LatLng(40.697299 , -73.809815),
    };
    var mapElement = document.getElementById('map');
    var map = new google.maps.Map(mapElement, mapOptions);
}

Answer 1

这很可能是因为您尝试重新加载地图而不是重新定位和缩放当前地图。试试这个，让我知道：

$('.preview').click(function(){
    var width = $('#width').val();
    var height = $('#height').val();
    $('#map').css({
        'width':width,
        'height':height
    });
    map.setZoom(6);
    //map.setCenter() change this is your logic needs it.
});

jQuery更新谷歌地图

1 个答案: