Google 地图 v3 - 打开时将信息窗口居中

Question

我有一个运行良好的 Google 地图，但我只需要对其进行调整，以便当单击标记并打开信息窗口时，我希望该标记（和地图）位于屏幕的中心。这样信息窗口就成为直接焦点。

如果有帮助，我正在使用 Infobox.js 创建信息窗口。我尝试过使用 Offset

pixelOffset：新的 google.maps.Size(-97, -20)

但是当您打开标记时，这不会使信息窗口或地图居中，并且不准确。

我的代码（现场示例）：

var ib = new InfoBox();

function initialize() {
    var mapOptions = {
        zoom: 12,
        center: new google.maps.LatLng(52.204872, 0.120163),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        styles: styles,
        scrollwheel: false
    };
    var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

    google.maps.event.addListener(map, "click", function () { ib.close() });

    setMarkers(map, sites);
    infowindow = new google.maps.InfoWindow({
        content: "loading..."
    });
}

var sites = [
    ['The Frontroom', 52.202977, 0.138938, 1, '<p>The Frontroom <br/>23-25 Gwydir Street, Cambridge, CB1 2LG <br/>01223 305 600 <br/> <a href="http://www.frontroomcambridge.com/">Website</a></p>'],
    ['Fitzwilliam Museum', 52.199678, 0.119931, 2, '<p>Fitzwilliam Museum <br/>Trumpington St, Cambridge, CB2 1RB <br/>01223 332900 <br/> <a href="http://www.fitzmuseum.cam.ac.uk/">Website</a></p>'],
    ['Wysing Arts centre', 52.182077, -0.06977, 3, '<p>Wysing Arts Centre <br/>Fox Rd, Cambridge <br/>CB23 2TX <br/>01954 718881 <br/> <a href="http://www.wysingartscentre.org/">Website</a></p>']
];

function createMarker(site, map) {
    var siteLatLng = new google.maps.LatLng(site[1], site[2]);
    var marker = new google.maps.Marker({
        position: siteLatLng,
        map: map,
        title: site[0],
        zIndex: site[3],
        html: site[4],
        icon: "http://visualartscambridge.org/wp-content/uploads/2013/03/map-dot.png"
    });

    var boxText = document.createElement("div");
    boxText.style.cssText = "margin-top: -200px; height:200px; background: white; padding: 10px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;";
    boxText.innerHTML = marker.html;

    var myOptions = {
        content: boxText,
        disableAutoPan: false,
        maxWidth: 0,
        pixelOffset: new google.maps.Size(-97, -20),
        zIndex: null,
        boxStyle: {
            background: "url('http://visualartscambridge.org/wp-content/uploads/2013/03/box-marker.png') no-repeat",
            width: "195px"
        },
        closeBoxMargin: "-185px 12px 200px 2px",
        closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
        infoBoxClearance: new google.maps.Size(0, 250),
        isHidden: false,
        alignBottom: true,
        pane: "floatPane",
        enableEventPropagation: false
    };

    google.maps.event.addListener(marker, "click", function (e) {
        ib.close();
        ib.setOptions(myOptions);
        ib.open(map, this);
    });
    return marker;
}

function setMarkers(map, markers) {
    for (var i = 0; i < markers.length; i++) {
        createMarker(markers[i], map);
    }
}

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

Answer 1

在标记点击监听器中添加对 google.maps.Map.setCenter 的调用。这将使地图以标记为中心：

google.maps.event.addListener(marker, "click", function (e) {
 ib.close();
 ib.setOptions(myOptions);
 ib.open(map, this);
 map.setCenter(this.getPosition());
});

上面的代码会立即跳转到新的位置，如果你想要更流畅的动画，你可以使用

map.panTo(this.getPosition());

而不是

map.setCenter(this.getPosition());