Google Maps API v3: Jak dynamicznie zmieniać ikonę znacznika?

Korzystając z interfejsu API Map Google w wersji 3, jak programowo zmienić ikonę znacznika?

Chciałbym, aby ktoś najechał kursorem na link - aby odpowiednia ikona znacznika na mapie zmieniła kolory, aby wskazać dany znacznik.

Zasadniczo ta sama funkcja, co Roost.

Gdy najedziesz kursorem na listę domu po lewej stronie, odpowiedni znacznik po prawej stronie zmieni kolor

Nazywamy marker.setIcon('newImage.png')... Spójrz tutaj na docs.

Pytasz, jak to zrobić? Możesz po prostu utworzyć każdy z nich divi dodać odbiornik mouseoveri mouseout, który zmieni ikonę iz powrotem dla znaczników.

Możesz również użyć koła jako ikony znacznika, na przykład:

var oMarker = new google.maps.Marker({
    position: latLng,
    sName: "Marker Name",
    map: map,
    icon: {
        path: google.maps.SymbolPath.CIRCLE,
        scale: 8.5,
        fillColor: "#F00",
        fillOpacity: 0.4,
        strokeWeight: 0.4
    },
});

a następnie, jeśli chcesz zmienić znacznik dynamicznie (jak po najechaniu myszą), możesz na przykład:

oMarker.setIcon({
            path: google.maps.SymbolPath.CIRCLE,
            scale: 10,
            fillColor: "#00F",
            fillOpacity: 0.8,
            strokeWeight: 1
        })

Ten wątek może być martwy, ale StyledMarker jest dostępny dla API v3. Po prostu połącz żądaną zmianę koloru z odpowiednim zdarzeniem DOM za pomocą metody addDomListener () . Ten przykład jest bardzo zbliżony do tego, co chcesz zrobić. Jeśli spojrzysz na źródło strony, zmień:

google.maps.event.addDomListener(document.getElementById("changeButton"),"click",function() {
  styleIcon.set("color","#00ff00");
  styleIcon.set("text","Go");
});

na coś takiego:

google.maps.event.addDomListener("mouseover",function() {
  styleIcon.set("color","#00ff00");
  styleIcon.set("text","Go");
});

To powinno wystarczyć, abyś się ruszył.

Strona Wikipedii w DOM Events pomoże Ci również wybrać zdarzenie, które chcesz przechwycić po stronie klienta.

Powodzenia (jeśli nadal go potrzebujesz)

Utility Library GMaps ma plugin o nazwie MapIconMaker który ułatwia generowanie różnych stylów znacznik na bieżąco. Używa Google Charts do rysowania znaczników.

Jest tutaj dobre demo , które pokazuje, jakie rodzaje markerów możesz za jego pomocą zrobić.

Możesz wypróbować ten kod

    <script src="http://maps.googleapis.com/maps/api/js"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>

<script>

    function initialize()
    {
        var map;
        var bounds = new google.maps.LatLngBounds();
        var mapOptions = {
                            zoom: 10,
                            mapTypeId: google.maps.MapTypeId.ROADMAP    
                         };
        map = new google.maps.Map(document.getElementById("mapDiv"), mapOptions);
        var markers = [
            ['title-1', '<img style="width:100%;" src="canberra_hero_image.jpg"></img>', 51.508742, -0.120850, '<p> Hello - 1 </p>'],
            ['title-2', '<img style="width:100%;" src="canberra_hero_image.jpg"></img>', 51.508742, -0.420850, '<p> Hello - 2 </p>'],
            ['title-3', '<img style="width:100%;" src="canberra_hero_image.jpg"></img>', 51.508742, -0.720850, '<p> Hello - 3 </p>'],
            ['title-4', '<img style="width:100%;" src="canberra_hero_image.jpg"></img>', 51.508742, -1.020850, '<p> Hello - 4 </p>'],
            ['title-5', '<img style="width:100%;" src="canberra_hero_image.jpg"></img>', 51.508742, -1.320850, '<p> Hello - 5 </p>']
        ];

        var infoWindow = new google.maps.InfoWindow(), marker, i;
        var testMarker = [];
        var status = [];
        for( i = 0; i < markers.length; i++ ) 
        {
            var title = markers[i][0];
            var loan = markers[i][1];
            var lat = markers[i][2];
            var long = markers[i][3];
            var add = markers[i][4];


            var iconGreen = 'img/greenMarker.png'; //green marker
            var iconRed = 'img/redMarker.png';     //red marker

            var infoWindowContent = loan + "\n" + placeId + add;

            var position = new google.maps.LatLng(lat, long);
            bounds.extend(position);

            marker = new google.maps.Marker({
                map: map,
                title: title,
                position: position,
                icon: iconGreen
            });
            testMarker[i] = marker;
            status[i] = 1;
            google.maps.event.addListener(marker, 'click', ( function toggleBounce( i,status,testMarker) 
            {
                return function() 
                {
                    infoWindow.setContent(markers[i][1]+markers[i][4]);
                    if( status[i] === 1 )
                    {
                        testMarker[i].setIcon(iconRed);
                        status[i] = 0;

                    }
                    for( var k = 0; k <  markers.length ; k++ )
                    {
                        if(k != i)
                        {
                            testMarker[k].setIcon(iconGreen);
                            status[i] = 1;

                        }
                    }
                    infoWindow.open(map, testMarker[i]);
                }
            })( i,status,testMarker));
            map.fitBounds(bounds);
        }
        var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event)
        {
            this.setZoom(8);
            google.maps.event.removeListener(boundsListener);
        });
    }
    google.maps.event.addDomListener(window, 'load', initialize);

</script>

<div id="mapDiv" style="width:820px; height:300px"></div>