API Google Maps v3: Як динамічно змінити значок маркера?

Як я можу програмно змінити значок маркера за допомогою API Google Maps v3?

Що я хотів би зробити, це коли хтось наводить на посилання - щоб відповідна піктограма маркера на карті змінила кольори, щоб позначити маркер, про який йде мова.

По суті, та сама функція, що і Рост.

Якщо навести курсор миші на домашній список зліва, відповідний маркер праворуч змінює колір

Зателефонуйте marker.setIcon('newImage.png')... Подивіться тут на документи.

Ви запитуєте про власне спосіб це зробити? Ви можете просто створити кожен div, а також додати mouseoverта mouseoutслухач, який міняв би піктограму та зворотний бік маркерів.

Ви також можете використовувати коло як значок маркера, наприклад:

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

а потім, якщо ви хочете динамічно змінити маркер (як, наприклад, в режимі миші), ви можете, наприклад:

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

Цей потік може бути мертвим, але StyledMarker доступний для API v3. Просто прив'яжіть потрібну зміну кольору до правильної події DOM за допомогою методу addDomListener () . Цей приклад досить близький до того, що ви хочете зробити. Якщо ви подивитесь на джерело сторінки, змініть:

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

до чогось типу:

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

Цього має бути достатньо, щоб ви рухалися.

Сторінка Вікіпедії про події DOM також допоможе вам націлити на події, які ви хочете зробити на клієнтській стороні.

Удачі (якщо вона вам все-таки потрібна)

У бібліотеці GMaps Utility є плагін під назвою MapIconMaker, який дозволяє легко генерувати різні стилі маркерів. Він використовує графіки Google для малювання маркерів.

Там хороша демонстрація тут , що показує , які маркери ви можете зробити з ним.

Ви можете спробувати цей код

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