谷歌地图看起来在div内部移动

时间:2012-09-12 13:03:01

标签: javascript jquery google-maps google-maps-api-3

我遇到谷歌地图问题。我将地图JS加载到一个文件中,我使用ajax(和jquery)附加一个模态div,其中包含地图。我得到的是下面的图像:

Correct map

然而,当我“关闭”模态(删除div,因此,删除地图)并尝试再次打开它时,会出现问题:

Moved map

除了看起来不完整之外,看起来地图认为它的左上角是div中的一些像素。我向你保证,因为当我尝试移动地图时,它会刷新其内容并删除地图中的“不可见”(在这种情况下是不可见的)部分。我要离开这里用来显示地图的代码(虽然这很简单。)

var marker = null, geocoder, latLng, map = null;
geocoder = new google.maps.Geocoder();
latLng = new google.maps.LatLng(41.3865, 2.1648);
var myOptions = {
    zoom: 16,
    center: latLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    disableDefaultUI: false
};
if(map === null) {
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}

function clearOverlays() {
    if (marker !== null) {
        marker.setMap(null);
        marker = null;
    }
}

function getPosition(address, title) {
    clearOverlays();

    geocoder.geocode({
            address : address,
            region : 'es'
        },
        function (results, status) {
            if (status === google.maps.GeocoderStatus.OK) {
                var result = results[0];
                latLng = result.geometry.location

                marker = new google.maps.Marker({
                    'title': title,
                    'map': map,
                    'position': latLng,
                    'animation': google.maps.Animation.DROP
                });
                map.setCenter(latLng);
            }
        }
    );
}

getPosition(place.address, place.title);

为了举例,我们假设place是一个包含addresstitle

的对象

1 个答案:

答案 0 :(得分:4)

版本2有一个checkresize()我记得在这样的情况下使用,其中地图会移动中心点。我认为v3等价物是这样的:

google.maps.event.trigger(地图,'调整大小');