本文介绍了Google Map v3 - 打开时将一个infowindow居中的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个可以正常工作的Google Map，但我只需要对它进行调整，以便在点击标记并打开信息窗口时，我希望标记（和地图）在屏幕上居中。这是因为信息窗口是直接关注的。
如果有帮助，我使用创建infowindows。我已经尝试使用Offset
但是，当您打开标记并且它不准确时，这不会集中infowindow或地图。
我的代码（）：
var ib = new InfoBox（）;
函数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（地图，网站）;
infowindow = new google.maps.InfoWindow（{
content：loading ...
}）;
}
var sites = [
['The Frontroom'，52.202977,0.138938,1，'< p> Frontroom< br /> 23-25 Gwydir Street，Cambridge，CB1 2LG< br />> 01223 305 600< br /> < a href =http://www.frontroomcambridge.com/>网站< / a>< / p>']，
['Fitzwilliam Museum'，52.199678,0.119931,2'< ; p> Fitzwilliam Museum< br /> Trumpington St，Cambridge，CB2 1RB< 01223 332900< br / gt; < a href =http://www.fitzmuseum.cam.ac.uk/>网站< / a>< / p>']，
['Wysing Arts center'，52.182077， - 0.06977，3，< p> Wysing Arts Center< br> Fox Rd，Cambridge< br / gt; CB23 2TX< br /> 01954 718881< br /> < a href =http://www.wysingartscentre.org/>网站< / a>< / p>']
];
函数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]，
图标：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-半径：6px;;
boxText.innerHTML = marker.html;
$ b $ 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
，width：195px
}
，closeBoxMargin：-185px 12px 200px 2px
，closeBoxURL：http：/ /www.google.com/intl/zh_CN/mapfiles/close.gif
，infoBoxClearance：新的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）;
}）;
返回标记;
}
函数setMarkers（map，markers）{
for（var i = 0; i< markers.length; i ++）{
createMarker（markers [i]，map）;
}
}
google.maps.event.addDomListener（window，'load'，initialize）;
解决方案
添加对google.maps.Map.setCenter的调用在标记点击侦听器。这会将地图放在标记上：
google.maps.event.addListener（marker，click，function（e ）{
ib.close（）;
ib.setOptions（myOptions）;
ib.open（map，this）;
map.setCenter（marker.getPosition（）） ;
}）;
I have a Google Map that works fine but I just need to tweak it so that when a marker is clicked and opens up a info window, I'd like that marker (and the map) to center on the screen. This is so that the info window is the direct focus.
If it helps, I'm using Infobox.js to create the infowindows. I've tried using Offset
but this doesn't center the infowindow or the map when you open the marker and its not accurate.
My code (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 <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);
解决方案
Add a call to google.maps.Map.setCenter in the marker click listener. This will center the map on the marker:
google.maps.event.addListener(marker, "click", function (e) {
ib.close();
ib.setOptions(myOptions);
ib.open(map, this);
map.setCenter(marker.getPosition());
});
这篇关于Google Map v3 - 打开时将一个infowindow居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！