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

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

运行代码：http://jsbin.com/odimop/edit#javascript，html，实时

正如你所看到的，使用变量（var-styleoo）的问题是，当属性发生变化时，所有使用该变量的标记都会以相同的方式表现，在这种情况下是标记4和标记5。当地图有太多标记时，这种方法既麻烦又乏味，因为每个标记都需要一个样式可变的

我正在寻找一个使用以下内容的解决方案：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>

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

相关内容

最新更新

热门标签：