谷歌地图看起来在div内移动 [英] Google Map looks moved inside the div

问题描述

我在使用Google地图时遇到问题。我将地图JS加载到一个文件中，在该文件中使用包含地图的ajax（和jquery）附加模态div。像下面的图像是我得到的：

除了看起来不完整之外，看起来地图认为它的左上角是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; 
 
 
 
函数getPosition（地址，标题）{
 clearOverlays（）; 
 
 geocoder.geocode（{
地址：地址，
地区：'es'
}，
函数（结果，状态）{
 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 是一个包含地址和标题

解决方案

第2版有一个checkresize（），我记得在这种情况下，地图会移动中心点。我认为v3等价物是这样的：

google.maps.event.trigger（map，'resize'）;

I'm having problems with google maps. I load the maps JS in a file where I append a modal div using ajax (and jquery), which contains the map. Something like the following image is what I got:

However, when I "close" the modal (which removes the div and, thus, the map) and try to open it again, a problem occurs:

Apart from looking incomplete, it looks like maps thinks its top left corner is some pixels out of the div. I assure you this, because when I try to move the map it refreshes its content and removes the "non-visible" (and unluckily visible, in this case) parts of the map. I'm leaving here the code I use to show the map (it's pretty straightforward, though).

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);

For the sake of the example, let's assume place is an object containing address and title

解决方案

Version 2 had a checkresize() which I remember using in cases like this where the map would shift the center point. I think the v3 equivalent is something like this:

google.maps.event.trigger(map, 'resize');

这篇关于谷歌地图看起来在div内移动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！