Google Maps API v3: Làm cách nào để thay đổi động biểu tượng điểm đánh dấu?

Sử dụng Google Maps API v3, làm cách nào để thay đổi biểu tượng điểm đánh dấu theo chương trình?

Điều tôi muốn làm là, khi ai đó di chuột qua một liên kết - để biểu tượng điểm đánh dấu tương ứng trên bản đồ thay đổi màu sắc để biểu thị điểm đánh dấu được đề cập.

Về cơ bản, chức năng tương tự như những gì Roost làm.

Khi bạn di chuột qua danh sách nhà ở bên trái, điểm đánh dấu tương ứng ở bên phải sẽ thay đổi màu

Gọi cho marker.setIcon('newImage.png')... Tìm tài liệu ở đây .

Bạn đang hỏi về cách thực tế để làm điều đó? Bạn chỉ có thể tạo mỗi divvà thêm một mouseovervà trình mouseoutnghe sẽ thay đổi biểu tượng và quay lại cho các điểm đánh dấu.

Bạn cũng có thể sử dụng hình tròn làm biểu tượng điểm đánh dấu, ví dụ:

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

và sau đó, nếu bạn muốn thay đổi động điểm đánh dấu (như khi di chuột qua), bạn có thể, ví dụ:

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

Chủ đề này có thể đã chết, nhưng StyledMarker có sẵn cho API v3. Chỉ cần liên kết sự thay đổi màu mà bạn muốn với sự kiện DOM chính xác bằng phương thức addDomListener () . Đây ví dụ là khá gần với những gì bạn muốn làm. Nếu bạn nhìn vào nguồn trang, hãy thay đổi:

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

đến một cái gì đó như:

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

Đó là đủ để giúp bạn tiến lên.

Trang Wikipedia về Sự kiện DOM cũng sẽ giúp bạn nhắm mục tiêu sự kiện mà bạn muốn nắm bắt ở phía máy khách.

Chúc may mắn (nếu bạn vẫn cần nó)

Các GMaps Utility Library có một plugin gọi MapIconMaker mà làm cho nó dễ dàng để tạo phong cách đánh dấu khác nhau một cách nhanh chóng. Nó sử dụng Google Charts để vẽ các điểm đánh dấu.

Có một bản demo hay ở đây cho thấy bạn có thể tạo ra những loại điểm đánh dấu nào với nó.

Bạn có thể thử mã này

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