javascript - 谷歌地图 - setIcon 代码使标记消失

Question

我正在尝试在单击标记时动态更改标记的图标。我在 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 是有效的，您可以在浏览器中打开它看到这一点。

那么谁能告诉我为什么这段代码不起作用？

Answer 1

MarkerImage 需要 url 作为第一个参数，而不是包含 url 的对象。

但您应该避免使用 MarkerImage，它已被弃用。

您也可以将 url 直接传递给 setIcon。

可能的方法(都将给出相同的结果):

  //use the MarkerImage-object this.setIcon(icon);      //simply use the url  this.setIcon('http://jovansfreelance.com/bikestats/images/bike_red.png');    //using an google.maps.Icon-object this.setIcon({url:'http://jovansfreelance.com/bikestats/images/bike_red.png'});