Question

我想动态更改任何Google地图标记的颜色/文字。

运行代码：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 :(');

至于其他问题，如果两者同时发生变化，则需要为每个StyledIcon创建StyledMarker。我只想添加一个每次都返回一个新图标的函数。

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");
});

Google地图：如何在鼠标悬停时有效地更改标记

1 个答案: