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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/14486908/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 21:46:26  来源:igfitidea点击:

Google Maps - setIcon code makes marker disappear

javascriptgoogle-maps-api-3maps

提问by jovan

I'm trying to dynamically change a marker's icon when the marker is clicked. I have multiple markers on the map (gathered through a database query), and this is the code I'm currently using - all pretty standard stuff:

我试图在单击标记时动态更改标记的图标。我在地图上有多个标记(通过数据库查询收集),这是我目前使用的代码 - 所有非常标准的东西:

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
    }
    ?>

}

The infoWindow code works fine, but the seticon code just makes the marker disappear and doesn't show the new marker icon. The new icon URL is valid, as you can see by opening it in your browser.

infoWindow 代码工作正常,但 seticon 代码只会使标记消失并且不显示新的标记图标。新图标 URL 有效,您可以通过在浏览器中打开它来看到。

So can anyone tell me why this code isn't working?

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

回答by Dr.Molle

MarkerImage expects the url as first parameter, not an object which contains the url.

MarkerImage 期望 url 作为第一个参数,而不是包含 url 的对象。

But you should avoid the use of MarkerImage, it's deprecated.

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

You also may pass the url directly to setIcon.

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

possible methods(all will give the same result):

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

  //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'});