我有一张 map ,上面有两个标记。
map 的初始 View 仅显示一个标记,我想在 map 旁边提供一个链接,单击该链接会将 map 移动到第二个标记。
这是我想要的演示,使用 API 的 v2:http://arts.brighton.ac.uk/contact-university-of-brighton-faculty-of-arts (注意 map 下方的链接)
这是我到目前为止所拥有的:
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(50.823817, -0.135634);
var myOptions = {
zoom: 13,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
} ,
scaleControl: false
};
var map = new google.maps.Map(document.getElementById("map"), myOptions);
// 1st marker
var marker1 = new google.maps.Marker({ position: new google.maps.LatLng(50.823817, -0.135634), map: map, title: 'my title' });
var infowindow = new google.maps.InfoWindow({ content: 'my window content' });
google.maps.event.addListener(marker1, 'click', function() { infowindow.open(map, marker1); });
// 2nd marker
var marker2 = new google.maps.Marker({ position: new google.maps.LatLng(51.5262405, -0.074549), map: map, title: 'my 2nd title'});
var infowindow2 = new google.maps.InfoWindow({ content: 'content for my 2nd window' });
google.maps.event.addListener(marker2, 'click', function() { infowindow2.open(map, marker2); });
}
</script>
所以我想添加一个指向
marker2
的链接。 ,将 map 向上移动 50 多英里,例如
<a href="#marker2">Second location</a>
.我该怎么做?
最佳答案
使用addDomListener
向链接添加点击事件,将 map 移动到该标记(您还需要向链接标签添加一个 id,以便您可以在代码中引用它):
编辑:在初始化函数中设置事件:
<head>
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker2 = new google.maps.Marker({ position: new google.maps.LatLng(51.5262405, -0.074549), map: map, title: 'my 2nd title'});
google.maps.event.addDomListener(document.getElementById("linkID"), "click", function(ev) {
map.setCenter(marker2.getPosition());
}
}
</script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize()">
<a href="javascript:function() { return false; }" id="location2">Second place</a>
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
关于google-maps - 谷歌地图 API V3 : How to jump to a specific marker from outside the map?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2792698/