我有一个谷歌地图,上面有很多标记(从 MySQL 数据库收集)。我当前正在使用以下代码在单击标记时更改标记的图标:
var redbikeicon = "images/bike_red.png";
<?php
$result=mysql_query("select * from sites") or die(mysql_error());
while($row=mysql_fetch_assoc($result)){
?>
marker = new google.maps.Marker({
position: new google.maps.LatLng(<?php echo $row['Latitude']; ?>, <?php echo $row['Longitude']; ?>),
map: map, icon: bikeicon});
//add event to every marker
google.maps.event.addListener(marker, 'click', function(){
//change icon color
this.setIcon(redbikeicon); //replace default icon with red version (color-marking all chosen markers)
})
<?php
}
?>
这段代码工作正常,但我现在需要在单击页面上的链接时发生同样的事情 - 地图旁边的页面上有一个链接列表,每个链接都对应于地图上的一个标记。单击链接时,相应的标记应该改变颜色,就像单击标记本身时一样。我该如何实现这个目标?
我做了类似的事情,除了我使用悬停。我在下面为您将其更改为点击。我也为此使用 jQuery。无论如何,您在链接上设置了单击事件。该链接有一个名为“record_id”的属性,它对应于您为标记设置的属性,也称为“record_id”。
单击链接时,您会获取 id,然后迭代所有标记,直到找到匹配的标记,然后使用 googlemaps api 中提供的 setIcon 方法更改图标。
希望有帮助。
设置id:
marker = new google.maps.Marker({
record_id: record_id,
position: point,
map: map,
title: name,
icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=whatever|BDD73C|000000'
});
在锚点上设置您的操作:
$("a.whatever").click(function(){
var id = $(this).attr('id');
changeMarker(id);
});
使用 setIcon 将图标替换为一种不同的颜色:
function changeMarker(record_id){
for (i in Markers){
if(Markers[i].record_id == record_id){
Markers[i].setIcon('http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=title|EC2A8C|000000');
}
}
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)