问题：
谷歌地图：点击标记自动居中地图
宇文和昶
我需要一些帮助来绘制我正在绘制的地图。地图并不特别复杂，因为我是一个初学者，我有一堆带有信息窗口的标记（完成后还会有更多标记），单击标记或选择页面HTML端下拉菜单的相应项时可以打开这些标记。
当信息窗口打开时（在HTML菜单中单击或选择），我想做但自己找不到的是在地图上自动居中标记。我假设有某种函数可以分配给click或infowindow打开事件，但无法确定是哪种函数以及如何实现它。
我的代码：
function initialize() {
var CarteStyles = [
{
featureType: "all",
stylers: [
{ saturation: -50 }
]
},
{
elementType: "labels",
stylers: [
{ visibility: "off" }
]
},
{
featureType: "road",
stylers: [
{ visibility: "simplified" },
{ saturation: -90 }
]
},
{
featureType: "road.local",
"stylers": [
{ "color": "#dbdbd4" }
]
},
{
featureType: "road",
elementType: "labels",
stylers: [
{ visibility: "off"}
]
},
{
featureType: "poi",
stylers: [
{ visibility: "off" }
]
},
{
featureType: "poi.park",
stylers: [
{ visibility: "on" }
]
},
{
featureType: "poi.park",
elementType: "labels",
stylers: [
{ visibility: "off"}
]
}
];
var CarteType = new google.maps.StyledMapType(CarteStyles,
{name: "Carte"});
var mapOptions = {
zoom: 16,
center: new google.maps.LatLng(48.872769, 2.30488),
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP,google.maps.MapTypeId.SATELLITE,'Carte'],
position: google.maps.ControlPosition.TOP_LEFT,
style: google.maps.MapTypeControlStyle.DEFAULT
}
};
var map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
map.mapTypes.set('Carte', CarteType);
map.setMapTypeId('Carte');
<!--START Hpr-->
var contentStringHpr = '<div id="content">'+
'<h2 id="firstHeading" class="firstHeading">HPR</h2>'+
'<div id="bodyContent">'+
'<p>Descr</p>'+
'<p><a href="#">Plus d\'informations</a></p>'+
'</div>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentStringHpr
});
var HprMarker = new google.maps.Marker({
position: new google.maps.LatLng(48.856682, 2.3274526),
map: map,
icon: new google.maps.MarkerImage('icon_hpr.png'),
title:"HPR",
zIndex: 3});
<!--STOP Hpr-->
<!--START Cal-->
var contentStringCal = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h2 id="firstHeading" class="firstHeading">CAL</h2>'+
'<div id="bodyContent">'+
'<p>descr</p>'+
'<p><a href="#">Plus d\'informations</a></p>'+
'</div>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentStringCal
});
var CalImage = new google.maps.MarkerImage('icon_cal.png'
);
var CalPos = new google.maps.LatLng(48.872769, 2.30488);
var CalMarker = new google.maps.Marker({
position: CalPos,
map: map,
icon: CalImage,
title:"Cal",
zIndex: 3});
<!--STOP Cal-->
<!--START Rsh-->
var contentStringRsh = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h2 id="firstHeading" class="firstHeading">RSH</h2>'+
'<div id="bodyContent">'+
'<p>descr</p>'+
'<p><a href="#">Plus d\'informations</a></p>'+
'</div>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentStringRsh
});
var RshImage = new google.maps.MarkerImage('icon_rsh.png'
);
var RshPos = new google.maps.LatLng(48.865862, 2.329943);
var RshMarker = new google.maps.Marker({
position: RshPos,
map: map,
icon: RshImage,
title:"RSH",
zIndex: 3});
<!--STOP Rsh-->
<!--START Rh-->
var contentStringRh = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h2 id="firstHeading" class="firstHeading">RH</h2>'+
'<div id="bodyContent">'+
'<p>descr</p>'+
'<p><a href="#">Plus d\'informations</a></p>'+
'</div>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentStringRh
});
var RhImage = new google.maps.MarkerImage('icon_rh.png'
);
var RhPos = new google.maps.LatLng(48.874140, 2.300144);
var RhMarker = new google.maps.Marker({
position: RhPos,
map: map,
icon: RhImage,
title:"RH",
zIndex: 3});
<!--STOP Rh-->
<!--START Rdr-->
var contentStringRdr = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h2 id="firstHeading" class="firstHeading">RDR</h2>'+
'<div id="bodyContent">'+
'<p>descr</p>'+
'<p><a href="#">Plus d\'informations</a></p>'+
'</div>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentStringRdr
});
var RdrImage = new google.maps.MarkerImage('icon_rdr.png'
);
var RdrPos = new google.maps.LatLng(48.865717, 2.308944);
var RdrMarker = new google.maps.Marker({
position: RdrPos,
map: map,
icon: RdrImage,
title:"RDR",
zIndex: 3});
<!--STOP Rh-->
<!--START Boutique1-->
var contentStringBoutique1 = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h2 id="firstHeading" class="firstHeading">Boutique1</h2>'+
'<div id="bodyContent">'+
'<p>descr</p>'+
'<p><a href="#">Plus d\'informations</a></p>'+
'</div>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentStringBoutique1
});
var Boutique1Image = new google.maps.MarkerImage('icon_bags_2.png'
);
var Boutique1Pos = new google.maps.LatLng(48.87, 2.31);
var Boutique1Marker = new google.maps.Marker({
position: Boutique1Pos,
map: map,
icon: Boutique1Image,
title:"Boutique1",
zIndex: 3});
<!--STOP Boutique1-->
<!--START Place1-->
var contentStringPlace1 = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h2 id="firstHeading" class="firstHeading">Place1</h2>'+
'<div id="bodyContent">'+
'<p>descr</p>'+
'<p><a href="#">Plus d\'informations</a></p>'+
'</div>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentStringPlace1
});
var Place1Image = new google.maps.MarkerImage('icon_place_arc.png'
);
var Place1Pos = new google.maps.LatLng(48.873836,2.295037);
var Place1Marker = new google.maps.Marker({
position: Place1Pos,
map: map,
icon: Place1Image,
title:"Place1",
zIndex: 3});
<!--STOP Place1-->
google.maps.event.addListener(HprMarker, 'click', function() {
infowindow.setContent(contentStringHpr);
infowindow.open(map,HprMarker);
});
google.maps.event.addListener(CalMarker, 'click', function() {
infowindow.setContent(contentStringCal);
infowindow.open(map,CalMarker);
});
google.maps.event.addListener(RshMarker, 'click', function() {
infowindow.setContent(contentStringRsh);
infowindow.open(map,RshMarker);
});
google.maps.event.addListener(RhMarker, 'click', function() {
infowindow.setContent(contentStringRh);
infowindow.open(map,RhMarker);
});
google.maps.event.addListener(RdrMarker, 'click', function() {
infowindow.setContent(contentStringRdr);
infowindow.open(map,RdrMarker);
});
google.maps.event.addListener(Boutique1Marker, 'click', function() {
infowindow.setContent(contentStringBoutique1);
infowindow.open(map,Boutique1Marker);
});
google.maps.event.addListener(Place1Marker, 'click', function() {
infowindow.setContent(contentStringPlace1);
infowindow.open(map,Place1Marker);
});
var selectChoices = {
Boutique1Choice: Boutique1Marker,
Place1Choice: Place1Marker,
CalChoice: CalMarker,
RshChoice: RshMarker,
RhChoice: RhMarker,
RdrChoice: RdrMarker,
HprChoice: HprMarker
};
google.maps.event.addDomListener(
document.getElementById("selectLocation"), 'change',
function() {
google.maps.event.trigger(selectChoices[this.value], "click");
});
google.maps.event.addDomListener(
document.getElementById("selectLocation2"), 'change',
function() {
google.maps.event.trigger(selectChoices[this.value], "click");
});
google.maps.event.addDomListener(
document.getElementById("selectLocation3"), 'change',
function() {
google.maps.event.trigger(selectChoices[this.value], "click");
});
google.maps.event.addDomListener(
document.getElementById("selectLocation4"), 'change',
function() {
google.maps.event.trigger(selectChoices[this.value], "click");
});
}
共有3个答案
太叔小云
使用以下代码可以在标记单击时自动居中地图：
google.maps.event.addListener(marker, 'click', function() {
map.setCenter(marker.getPosition());
});
冯德佑
您已经在标记上使用了单击处理程序，所以您只需要添加一条线来将地图放在标记的中心：
google.maps.event.addListener(RdrMarker, 'click', function() {
map.setCenter(RdrMarker.getPosition());
infowindow.setContent(contentStringRdr);
infowindow.open(map,RdrMarker);
});
诸葛彦
一个稍微好一点的方法（视觉上）是使用panTo而不是setCenter，像这样：
google.maps.event.addListener(RdrMarker, 'click', function() {
map.panTo(RdrMarker.getPosition());
infowindow.setContent(contentStringRdr);
infowindow.open(map,RdrMarker);
});
这会重新居中，但会产生动画效果，而不是跳跃。
类似资料：
-
我有一张地图，上面有很多自定义的大标记。现在，我希望允许用户在地图上创建路径（显示为折线，稍后保存为地理坐标对列表）。 如果用户单击地图，我可以使用地图的setOnMapClickedListener方法收集这些位置。但是如果用户点击一个标记(setOnMarkerClickedListener)，我只能检索标记的位置（通常是标记的ancor的位置）。
-
当我点击地图上的某个地方，应用程序绘制当前位置和目的地之间的折线（点击）。我希望目标标记是点击自己所有的时间（每几秒钟），所以在用户移动新的折线是绘制（更新最后一个）。
-
我想使用自定义图标和c标记的地方 重写markerclick函数，并尝试获取该标记的标记，因为我存储在该标记中，在此之前，我使用了.equal方法来测试该标记是否等于该事件标记 我希望当我点击标记应该商店
-
使用google maps API，我有一个带有一些自定义图标的近距离标记的地图。每个标记是41px×50px，但每个标记的可点击区域是200px×200px。带标记的地图截图及其可点击区域 有什么办法可以缩小可点击区域的大小吗？
-
如何使Android Google Maps API v2中的标记变得可点击，以便它们要么打开一个带有选项的菜单，要么开始一个新的活动？我相信我在我的应用程序中的标记目前在一个“newb”方法。我没有为它们分配一个名称或方法，以便能够将其与所需代码的其余部分链接在一起。 如果你回答这个问题，请包括一个标记被引入一个独特的名称，然后被设置为可点击打开一个新活动的示例代码。
-
我正在为Android制作基于谷歌地图服务的公共交通地图。地图应该包含很多标记（超过300个），它们应该在地图放大和缩小（缩放）时调整大小。现在标记只是互相重叠，有没有办法创建像这样的自定义标记？ 我自己也试过，但没有成功。使用android-map-utils库（https://github.com/googlemaps/android-maps-utils）标记现在看起来更好了，但它们不能调整