Google Maps API v3: Bagaimana cara mengubah ikon penanda secara dinamis?

Dengan menggunakan Google Maps API v3, bagaimana cara mengubah ikon penanda secara terprogram?

Yang ingin saya lakukan adalah, saat seseorang mengarahkan kursor ke tautan - agar ikon penanda yang sesuai di peta berubah warna untuk menunjukkan penanda yang dimaksud.

Pada dasarnya, fungsinya sama seperti yang dilakukan Roost.

Saat Anda mengarahkan kursor ke daftar rumah di sebelah kiri, penanda yang sesuai di sebelah kanan berubah warna

Sebut marker.setIcon('newImage.png')... Carilah di sini untuk docs.

Apakah Anda bertanya tentang cara sebenarnya untuk melakukannya? Anda bisa membuat masing-masing div, dan menambahkan pendengar mouseoverdan mouseoutyang akan mengubah ikon dan kembali untuk penanda.

Anda juga dapat menggunakan lingkaran sebagai ikon penanda, misalnya:

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

dan kemudian, jika Anda ingin mengubah penanda secara dinamis (seperti gerakan mouse), Anda dapat, misalnya:

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

Utas ini mungkin mati, tetapi StyledMarker tersedia untuk API v3. Cukup ikat perubahan warna yang Anda inginkan ke acara DOM yang benar menggunakan metode addDomListener () . Ini contoh cukup dekat dengan apa yang ingin Anda lakukan. Jika Anda melihat sumber halaman, ubah:

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

menjadi sesuatu seperti:

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

Itu seharusnya cukup untuk membuat Anda terus bergerak.

Halaman Wikipedia di Acara DOM juga akan membantu Anda menargetkan acara yang ingin Anda tangkap di sisi klien.

Semoga berhasil (jika Anda masih membutuhkannya)

The GMaps Utilitas Perpustakaan memiliki plugin yang disebut MapIconMaker yang membuatnya mudah untuk menghasilkan gaya penanda yang berbeda dengan cepat. Ini menggunakan Google Charts untuk menggambar penanda.

Ada demo bagus di sini yang menunjukkan jenis penanda yang dapat Anda buat dengannya.

Anda dapat mencoba kode ini

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