谷歌地图：鼠标悬停时如何有效地更改标记

Question

我想动态更改任何谷歌地图标记的颜色/文本。

运行代码：http://jsbin.com/odimop/edit#javascript,html,live

如您所见，使用变量 (var styloo) 的问题是，当属性发生变化时，使用该变量的所有标记的行为方式相同，在本例中为 marker4 和 marker5。当地图有太多标记时，这种方法既麻烦又乏味，因为每个标记都需要一个样式变量

我正在寻找使用类似以下内容的解决方案：this.styleIcon.color = "00ff00";。但到目前为止还没有工作。

有什么想法吗？请！

        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/styledmarker/src/StyledMarker.js"></script>
        <script type="text/javascript">
            var styleIcon;

            function initialize() {
                var myLatLng = new google.maps.LatLng(37.313477473067, -121.880502070713);
                var myOptions = {
                    zoom: 10,
                    center: myLatLng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };

                var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

                var marker2 = new StyledMarker({styleIcon:new StyledIcon(StyledIconTypes.BUBBLE,{color:"00ffff",text:"Hover Me, this doesn't work"}),position:new google.maps.LatLng(37.5, -121.880502070713),map:map});
                var marker3 = new StyledMarker({styleIcon:new StyledIcon(StyledIconTypes.BUBBLE,{color:"ff0000",text:"Just a Marker"}),position:new google.maps.LatLng(37.4, -121.880502070713),map:map});

                google.maps.event.addDomListener(marker2,"mouseover", function(o){
                    this.setAnimation(google.maps.Animation.BOUNCE);
                    this.styleIcon.color = "00ff00";
                    this.styleIcon.text = "it does not change :(";
                });

                styloo = new StyledIcon(StyledIconTypes.BUBBLE,{color:"#95AA7B",text:"click me!",fore:"#ffffff"});
                var marker4 = new StyledMarker({styleIcon: styloo,position:new google.maps.LatLng(37.2, -121.88),map:map});
                var marker5 = new StyledMarker({styleIcon: styloo,position:new google.maps.LatLng(37.1, -121.88),map:map});
                google.maps.event.addDomListener(marker4,"click", function(o){
                    this.setAnimation(google.maps.Animation.BOUNCE);
                    styloo.set("fore","#ffffff");//test color
                    styloo.set("color","#C2554D");// background color
                    styloo.set("text","color changed");
                });

            }
        </script>

    </head>
    <body style="margin:0px; padding:0px;" onload="initialize()">
        <div id="map_canvas" style="width: 600px; height: 600px;"></div>
    </body>

Answer 1

根据StyledMarker 示例，您需要使用set(property, value) 方法，如下所示：

styleIcon.set("text","Elevation: " + results[0].elevation + "m");

在您的情况下，将鼠标悬停处理程序更改为：

this.styleIcon.set('color', '00ff00');
this.styleIcon.set('text', 'it does not change :(');

至于另一个问题，两者同时更改，您需要为每个StyledMarker 创建一个StyledIcon。我只是添加一个每次返回一个新图标的函数。

function createStyle() { return new StyledIcon(StyledIconTypes.BUBBLE,{color:"#95AA7B",text:"click me!",fore:"#ffffff"}); }

var marker4 = new StyledMarker({styleIcon: createStyle(),position:new google.maps.LatLng(37.2, -121.88),map:map});
var marker5 = new StyledMarker({styleIcon: createStyle(),position:new google.maps.LatLng(37.1, -121.88),map:map});

google.maps.event.addDomListener(marker4,"click", function(o){
    this.setAnimation(google.maps.Animation.BOUNCE);
    this.styleIcon.set("fore","#ffffff");//test color
    this.styleIcon.set("color","#C2554D");// background color
    this.styleIcon.set("text","color changed");
});