Google Maps API Javascript悬停对标记鼠标移除的影响

时间:2012-03-08 17:07:49

标签: jquery google-maps google-maps-markers mouseout

我有一个谷歌地图的坐标数组。每个坐标集都有自己的标记。如果用户将标记悬停(鼠标悬停),则它将被另一个图标交换(此图标对于所有标记都相同)。我的问题是,如果用户制作鼠标,我想恢复原始图标,但我只是为所有标记获取最后创建的标记(marker3.png)。

也许你有个主意。这是脚本:

$(document).ready(function(){
                            var locations = [
                            ['Dr. Christian Schrey', 52.499496, 13.316873, 4],
                            ['Dr. Teufel', 52.528664, 13.380232, 5],
                            ['Dr. Sebs Firma', 52.507839, 13.496490, 3],

                            ];

                            initialize();
                            var map;
                            function initialize() {
                            var myLatlng = new google.maps.LatLng(52.52427, 13.40629);
                            var myOptions = {
                                zoom: 11,
                                center: myLatlng,
                                mapTypeId: google.maps.MapTypeId.ROADMAP
                            }
                            map = new google.maps.Map(document.getElementById("Map"), myOptions);

                            var infowindow = new google.maps.InfoWindow();

                            var marker, i;
                            var y = 0;

                            for (i = 0; i < locations.length; i++) {  
                            y++;
                            image = 'http://xxx.de/test6/system/css/images/marker'+y+'.png';

                            marker = new google.maps.Marker({
                                position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                                map: map,
                                icon: image
                            });

                            google.maps.event.addListener(marker, 'click', (function(marker, i) {
                                return function() {
                                infowindow.setContent(locations[i][0]);
                                infowindow.open(map, marker);
                                }
                            })(marker, i));

                            google.maps.event.addListener(marker, "mouseover", function(event) {
                            this.setIcon("http://xxx.de/test6/system/css/images/pfote_clean.png");
                            });

                            google.maps.event.addListener(marker, "mouseout", function(event) {
                            this.setIcon(image);
                            });

                            }

                        };
                    });

我感谢任何帮助!谢谢。

1 个答案:

答案 0 :(得分:2)

您可以将网址存储在marker-options:

marker = new google.maps.Marker({
     position: new google.maps.LatLng(locations[i][1], locations[i][2]),
     map: map,
     icon: image,
     src:image//<-
});

然后您将能够在回调中稍后检索该网址:

this.setIcon(this.src);