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


105

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


Twój przykład z życia upadł. Chciałem żebyś wiedział. Zakładam, że jest to podobne do tego, co dzieje się na airbnb.com?
FujiRoyale

Odpowiedzi:


181

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.


6
to pomogło mi dowiedzieć się, jak zmienić animację znacznika:markersArray[0].setAnimation(google.maps.Animation.BOUNCE);
Ray

19

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

8

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)


Tak, ale zmiana wskaźnika mapy odbywa się poprzez zmianę właściwości kursora w CSS, a nie w Maps API - zobacz dokumentację
tatlar

To pytanie i odpowiedzi dotyczące StackOverflow mogą Cię dalej poprowadzić.
tatlar

5

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ć.


3
MapIconMaker nie jest dostępny dla Maps API v3
benjisail

StyledMarker for API v3 jest jednak. HTH.
tatlar

1
Niestety Google Charts API zostało niedawno oficjalnie wycofane przez Google :(
Danny C

4

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>
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.