【问题标题】:Google Maps infobox, pan map to adjusted infobox size谷歌地图信息框,平移地图以调整信息框大小
【发布时间】:2015-06-14 23:43:40
【问题描述】:

我有一个带有信息框的谷歌地图。信息框具有在信息框显示后更改其大小的功能。

但是,当内容大于最初显示的内容时,这会导致信息框流出地图。有没有办法调用 infoBox panBox 功能,以便 infoBox 将再次在地图中重新调整自己,就像它在打开时一样?

简而言之:改变尺寸后如何让 infoBox 再次适合?

参见示例: Fiddle

点击信息框查看问题

我的代码示例,因为我不允许在没有代码的情况下展示小提琴:)

function initialize() {
var loc, map, marker, infobox;

loc = new google.maps.LatLng(-33.890542, 151.274856);

map = new google.maps.Map(document.getElementById("map-canvas"), {
     zoom: 12,
     center: loc,
     mapTypeId: google.maps.MapTypeId.ROADMAP
});

marker = new google.maps.Marker({
    map: map,
    position: loc,
    visible: true
});

var infobox = new InfoBox({
     content: document.getElementById("infobox"),
     alignBottom: true,
     pixelOffset: new google.maps.Size(0, 0)
});

google.maps.event.addListener(marker, 'click', function() {
    infobox.open(map, this);
});

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

jQuery('document').ready(function(){
jQuery('.content').on('click', function(){
    jQuery('.content').hide();
    jQuery('.hidden').show();
    jQuery('#infobox').height(jQuery('.hidden').height());
});
});

【问题讨论】:

    标签: google-maps infobox


    【解决方案1】:

    你可以试试加这个map.panTo(loc);

    google.maps.event.addListener(marker, 'click', function() {
        infobox.open(map, this);
        map.panTo(loc);
    });
    

    【讨论】:

    • 这在您打开信息框时会起作用,但在信息框更改其内容时不起作用。
    【解决方案2】:

    你可以使用infobox.panBox_();

    如果您想知道它是如何工作的,请从插件中打开 infobox.js。

    【讨论】:

      猜你喜欢
      • 2017-09-13
      • 1970-01-01
      • 1970-01-01
      • 2012-08-13
      • 2013-02-03
      • 2013-02-10
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多