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

Program / 글쓴이

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>

답변