>

Google Map API 사용에 문제가 있습니다. 지도에 원을 그려 각 원에 마우스 오버 이벤트를 만들어 시간 값을 표시하는 정보 창을 엽니 다.

첫 번째 문제는 정보창 내용이 다른 원에 대해 변경되지 않는다는 것입니다. 두 번째 문제는 어떤 이유로 infowindow가 나타나지 않는다는 것입니다.

누군가 도와주세요?

감사합니다

코드는 다음과 같습니다 :

function initialize() {
        data={};
        data[0]={
            center: new google.maps.LatLng(51.49799,-0.196145),
            population: 1000,
            time:"2013-03-01T03:31:18Z"
        };
        data[1]={
            center: new google.maps.LatLng(51.496294,-0.188184),
            population: 1000,
            time:"2013-03-01T13:21:15Z"
        };
        data[2]={
            center: new google.maps.LatLng(51.497817,-0.178313),
            population: 1000,
            time:"2013-03-04T04:03:50Z"
        };
        var mapOptions = {
            zoom: 15,
            center: new google.maps.LatLng(51.494438, -0.188907),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById('map_canvas'),
        mapOptions);
        var movingColour= '#FF0000';
        var counter=0;
        for (var city in data) {
            // Construct the circle for each value in citymap. We scale population by 20.
            //movingColour=ColorLuminance(movingColour, -0.005) ;
            var populationOptions = {
                strokeOpacity: 0.35,
                strokeWeight: 2,
                strokeColor:movingColour,
                fillColor:movingColour ,
                fillOpacity: 0.35,
                map: map,
                clickable:true,              
                center: data[city].center,
                radius: data[city].population / 20
            };
            var circle = new google.maps.Circle(populationOptions);         
            var infowindow =new google.maps.InfoWindow({
                content: data[city].time
            });  
            google.maps.event.addListener(circle, 'mouseover', function(ev) {
                alert(infowindow.content);
                infowindow.open(map,circle);
            });
            counter++;    
        }
        google.maps.event.addDomListener(window, 'load', initialize);
    }

  • 답변 # 1

    이것은 일반적으로 InfoWindows 마커에서 흔히 볼 수있는 문제이며 여러 가지 방법으로 해결할 수 있습니다. .open의 선택적 두 번째 매개 변수는 마커 일 수 있기 때문에 InfoWindow가 열리지 않습니다. 마커가 없으면 마커를 열 위치를 설정해야합니다. 일반적으로 InfoWindow 컨텐츠 문제를 해결하기 위해 함수 클로저를 사용합니다 (다른 방법도 있음).

    function initialize() {
        data={};
        data[0]={
            center: new google.maps.LatLng(51.49799,-0.196145),
            population: 1000,
            time:"2013-03-01T03:31:18Z"
        };
        data[1]={
            center: new google.maps.LatLng(51.496294,-0.188184),
            population: 1000,
            time:"2013-03-01T13:21:15Z"
        };
        data[2]={
            center: new google.maps.LatLng(51.497817,-0.178313),
            population: 1000,
            time:"2013-03-04T04:03:50Z"
        };
        var mapOptions = {
            zoom: 15,
            center: new google.maps.LatLng(51.494438, -0.188907),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById('map_canvas'),
        mapOptions);
        var movingColour= '#FF0000';
        var counter=0;
        for (var city in data) {
            var populationOptions = {
                strokeOpacity: 0.35,
                strokeWeight: 2,
                strokeColor:movingColour,
                fillColor:movingColour ,
                fillOpacity: 0.35,
                map: map,
                clickable:true,              
                center: data[city].center,
                radius: data[city].population / 20
            };
            var circle = new google.maps.Circle(populationOptions);         
            createClickableCircle(map, circle, data[city].time); 
            counter++;    
        }
        google.maps.event.addDomListener(window, 'load', initialize);
    }
    function createClickableCircle(map, circle, info){
           var infowindow =new google.maps.InfoWindow({
                content: info
            });  
            google.maps.event.addListener(circle, 'mouseover', function(ev) {
                // alert(infowindow.content);
                infowindow.setPosition(circle.getCenter());
                infowindow.open(map);
            });
     }
    
    

    (아마도 InfoWindow를 닫기 위해 리스너를 추가하고 싶을 것입니다.)

  • 답변 # 2

    더 나은 구문과 var 로 정의하지 않은 이름이 지정된 변수를 갖기 위해 약간의 자바 스크립트를 다시 작성합니다. .

    예 : data={}; 정의   var data=[]; 를 사용하십시오  아래에서 객체를 포함하는 배열로 사용한다는 것을 알 수 있습니다. 또한 정보창이 이미 열린 원 위로 커서를 이동할 때 깜박임 효과를 멈추는수정을 만들었습니다.

    // To stop flickering.. we wont reopen until necessary
    // We open only if position has been changed or infowindow is not visible
    if(infowindow.getPosition() !== this.getCenter() || infowindowClosed === true) {
       // this can be used to access data values
       infowindow.setContent(this.data.time); 
       infowindow.setPosition(this.getCenter());
       infowindow.open(map);
       infowindowClosed = false;
    }
    
    

    기타 개선 사항에는 initialize(); 위의 전역 변수를 거의 정의하지 않는 것이 포함됩니다.  방법, 건배.

    댓글로 바이올린 연주

    를 확인하세요.

  • 이전 python - 창 아이콘이 표시되지 않습니다
  • 다음 html - CSS 커서 사용자 정의