Google Maps API v3 : 마커 아이콘을 어떻게 동적으로 변경하나요?

Google Maps API v3 : 마커 아이콘을 어떻게 동적으로 변경하나요?

---

Google Maps API v3를 사용하여 마커 아이콘을 프로그래밍 방식으로 변경하려면 어떻게해야합니까?

내가하고 싶은 것은 누군가가 링크 위로 마우스를 가져 가면지도의 해당 마커 아이콘이 문제의 마커를 나타내는 색상으로 변경되도록하는 것입니다.

본질적으로 Roost와 동일한 기능입니다.

왼쪽에있는 집 목록 위로 마우스를 가져 가면 오른쪽에있는 해당 마커의 색상이 변경됩니다.

---

전화 marker.setIcon('newImage.png')... 여기 문서를 찾으 십시오 .

실제 방법에 대해 질문하고 있습니까? 당신은 각을 만들 수 div및 추가 a를 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에서 사용할 수 있습니다. addDomListener () 메서드를 사용하여 원하는 색상 변경을 올바른 DOM 이벤트에 바인딩하면 됩니다. 이 예제 는 당신이하고 싶은 일에 매우 가깝습니다. 페이지 소스를 보면 다음을 변경하십시오.

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 이벤트 의 Wikipedia 페이지 는 클라이언트 측에서 캡처하려는 이벤트를 대상으로하는데도 도움이됩니다.

행운을 빕니다 (아직 필요한 경우)

---

GMaps 유틸리티 라이브러리 라는 플러그인이 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>

참고 URL : https://stackoverflow.com/questions/1941260/google-maps-api-v3-how-do-i-dynamically-change-the-marker-icon