Google Maps: как эффективно менять маркер при наведении курсора - PullRequest
Новая
       2

Google Maps: как эффективно менять маркер при наведении курсора

1 голос
/ 09 февраля 2012

Я хочу динамически изменить цвет / текст любого маркера карт 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>

1 Ответ

4 голосов
/ 09 февраля 2012

В соответствии с примерами 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");
});
...