JS小提琴: http://jsfiddle.net/megatimes/NVDLf/7/
我有一个从数组创建多个标记的地图。 在地图下方是一些链接,当点击时,我想使地图平移到其各自的标记,并打开信息窗口。
鉴于我不希望自己生成链接作为创建标记的循环的一部分,我该怎么做?
我很确定这是一个范围问题,因为地图下方的链接都打开了位置数组中的最后一项,但我似乎无法弄清楚如何绕过它。
由于
var locations = [
[
"Location 1",
"215 West Girard Avenue 19123",
"39.9695601",
"-75.1395161"
],
[
"Location 2",
"5360 Old York Road 19141",
"40.034038",
"-75.145223"
],
[
"Location 3",
"1350 W Girard Avenue 19123",
"39.9713524",
"-75.1590360"
]
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: new google.maps.LatLng(39.9995601, -75.1395161),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][2], locations[i][3]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
$(function() {
$('#locations h3 a').each(function() {
$(this).on('click', function() {
google.maps.event.trigger(marker, 'click');
})
});
});
<div id="map" style="width: 500px; height: 400px;"></div>
<div id="locations">
<h3><a href="#">Location 1</a></h3>
<p>Arbitrary content about 1</p>
<h3><a href="#">Location 2</a></h3>
<p>Arbitrary content about 2</p>
<h3><a href="#">Location 3</a></h3>
<p>Arbitrary content about 3</p>
</div>
答案 0 :(得分:5)
您可以这样做:
http://jsfiddle.net/6vjwd/2/embedded/result/
使用createMarker函数将infowindow与标记相关联:
function createMarker(latlng, html)
{
var marker = new google.maps.Marker({
position: latlng,
map: map
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(html);
infowindow.open(map, marker);
});
return marker;
}
一个全局数组,允许从HTML点击侦听器中引用它们。
外部链接取决于知道位置的顺序。或者,如果您想通过“名称”查找它们,您可以使用“关联”数组,并将名称作为索引。
按名称索引标记:
答案 1 :(得分:3)
我会在生成标记时使用jQuery生成链接。您可以使用jQuery的.data()
调用将标记对象存储在链接对象上,并将通用单击处理程序添加到将地图设置为标记位置的链接。
有点像这样:
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][2], locations[i][3]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
$('#locations').append($('<a>').append('Location Name').click(function()
{
// $(this).data('marker')
}).data('marker', marker));
}
答案 2 :(得分:1)
markers
的全局变量数组中。然后,无论何时单击链接,使用jquery .index() function检查这些链接的数组中的链接,并触发相应标记上的“单击”(链接1 =标记1等)。
感谢geocodezip以及我在这里重复使用的createMarker函数。
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map { width: 500px; height: 400px; }
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var marker, map;
var markers = [];
function initialise() {
var i;
var locations = [
[
"Location 1",
"215 West Girard Avenue 19123",
"39.9695601",
"-75.1395161"
],
[
"Location 2",
"5360 Old York Road 19141",
"40.034038",
"-75.145223"
],
[
"Location 3",
"1350 W Girard Avenue 19123",
"39.9713524",
"-75.1590360"
]
];
map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: new google.maps.LatLng(39.9995601, -75.1395161),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
infowindow = new google.maps.InfoWindow();
for (i = 0; i < locations.length; i++) {
markers.push(createMarker(new google.maps.LatLng(locations[i][2], locations[i][3]), locations[i][0]));
}
}
function createMarker(latlng, html)
{
var marker = new google.maps.Marker({
position: latlng,
map: map
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(html);
infowindow.open(map, marker);
});
return marker;
}
$(function() {
$('#locations h3 a').each(function() {
$(this).on('click', function() {
// find out which link in the array was clicked (1st, 2nd etc)
var intLinkClicked = $('#locations h3 a').index($(this));
google.maps.event.trigger(markers[intLinkClicked], 'click');
});
});
});
google.maps.event.addDomListener(window, 'load', initialise);
</script>
</head>
<body>
<div id="locations">
<h3><a href="#">Location 1</a></h3>
<p>Arbitrary content about 1</p>
<h3><a href="#">Location 2</a></h3>
<p>Arbitrary content about 2</p>
<h3><a href="#">Location 3</a></h3>
<p>Arbitrary content about 3</p>
</div>
<div id="map"></div>
</body>
</html>