单击标记时,我试图动态更改标记的图标。我在 map 上有多个标记(通过数据库查询收集),这是我当前正在使用的代码-所有相当标准的东西:
function initialize() {
var myOptions = {
center: new google.maps.LatLng(-30,135),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"),
myOptions);
var bikeicon = "images/bike.png";
<?php
$result=mysql_query("select * from sites");
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});
infoWindow = new google.maps.InfoWindow();
marker.html="<?php echo stripslashes($row['ShortDesc']); ?>";
google.maps.event.addListener(marker, 'click', function(){
//show infowindow
infoWindow.setContent(this.html);
infoWindow.open(map, this);
//change icon color
var icon = new google.maps.MarkerImage({ url:"http://jovansfreelance.com/bikestats/images/bike_red.png"});
this.setIcon(icon); //why doesn't this work?
})
<?php
}
?>
}
infoWindow代码可以正常工作,但是seticon代码只会使标记消失,并且不会显示新的标记图标。新图标的URL有效,如在浏览器中打开它所看到的。
那么谁能告诉我为什么此代码不起作用?
最佳答案
MarkerImage将url作为第一个参数,而不是包含url的对象。
但是您应该避免使用MarkerImage,因为它已过时。
您也可以将URL直接传递给setIcon。
可能的方法(所有方法都会得出相同的结果):
//使用MarkerImage对象
this.setIcon(icon);
//只需使用网址
this.setIcon('http://jovansfreelance.com/bikestats/images/bike_red.png');
//使用google.maps.Icon-object
this.setIcon({url:'http://jovansfreelance.com/bikestats/images/bike_red.png'});