首页 文章

谷歌 Map v3 - 打开时将信息中心置于中心位置

提问于
浏览
6

我有一个可以正常工作的谷歌 Map ,但我只需要调整它,以便在点击标记并打开信息窗口时,我希望该标记(和 Map )在屏幕上居中 . 这样信息窗口就是直接焦点 .

如果它有帮助,我正在使用Infobox.js创建infowindows . 我尝试过使用Offset

pixelOffset:new google.maps.Size(-97,-20)

但是当打开标记时,这并不会使信息窗或 Map 居中,而且不准确 .

我的代码(live example):

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 
23-25 Gwydir Street, Cambridge, CB1 2LG
01223 305 600
<a href="http://www.frontroomcambridge.com/">Website</a></p>'], ['Fitzwilliam Museum',52.199678,0.119931, 2, '<p>Fitzwilliam Museum
Trumpington St, Cambridge, CB2 1RB
01223 332900
<a href="http://www.fitzmuseum.cam.ac.uk/">Website</a></p>'], ['Wysing Arts centre', 52.182077,-0.06977, 3, '<p>Wysing Arts Centre
Fox Rd, Cambridge
CB23 2TX
01954 718881
<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);

1 回答

  • 19

    在标记点击侦听器中添加对google.maps.Map.setCenter的调用 . 这会将 Map 置于标记的中心:

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

相关问题