谷歌地图API v3 infowindow页面加载错误的位置

时间:2013-07-14 19:25:07

标签: google-maps-api-3

看起来像google地图信息框在pageload上的位置是错误的,或者当你的地图高度设置低于400 / 380px时至少错误 例 http://jsfiddle.net/TbDzG/18/

 var startLocation = new google.maps.LatLng(36.151685,-115.152438);

function initialize() {
    var mapOptions = {
        center: startLocation,
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map-canvas"),
    mapOptions);

  var marker = new google.maps.Marker({
      position: startLocation,
      map: map,
      draggable:true,
      animation: google.maps.Animation.DROP,
      title:"Hello World!"
  });
  var infowindow = new google.maps.InfoWindow();
infowindow.setContent('some content here');
infowindow.open(map, marker);  


}
google.maps.event.addDomListener(window, 'load', initialize);

有没有人知道如何将它移动到正确的位置并使信息框居中而不是将标记居中?

2 个答案:

答案 0 :(得分:5)

你不能使infowindow居中,因为marker和infowindow(+ map)具有相同的位置。

试试这个,当加载地图时,InfoWindow将被打开并将平移地图。

var infowindow = new google.maps.InfoWindow();
infowindow.setContent('some content here');
google.maps.event.addListenerOnce(map, 'idle', function(){infowindow.open(map, marker);  });

http://jsfiddle.net/iambnz/jAgcz/

答案 1 :(得分:1)

如果您在点击时打开信息窗口并在地图完成渲染后触发标记点击(空闲'事件),地图将移动,以便完全显示信息窗口。

var startLocation = new google.maps.LatLng(36.151685,-115.152438);

function initialize() {
    var mapOptions = {
        center: startLocation,
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map-canvas"),
    mapOptions);

  var infowindow = new google.maps.InfoWindow();
  var marker = new google.maps.Marker({
      position: startLocation,
      map: map,
      draggable:true,
      animation: google.maps.Animation.DROP,
      title:"Hello World!"
  });
  google.maps.event.addListener(marker,'click', function(evt) {
      infowindow.setContent('some content here');
      infowindow.open(map, marker);
  });
  google.maps.event.addListenerOnce(map,'idle',function() {
      google.maps.event.trigger(marker,'click');
  });  
}
google.maps.event.addDomListener(window, 'load', initialize);

http://jsfiddle.net/YWbXE/2/