Google지도 - 배열의 폴리곤에 InfoWind를 연결하기

Question

나는이 벽으로 내 머리를 벽으로 부딪쳐왔다. 폴리곤 배열을 만들고 infoWindow에 표시 할 각각의 데이터를 연결하려고합니다. 지도상의 모든 폴리곤을 볼 수 있습니다. 청취자를 추가하면 발생하지만 색상 변경이 발생하지만 InfoWindow는 표시되지 않습니다. 모든 도움이 크게 도움이 될 것입니다!

건배!

C ...

tmppoly = new google.maps.Polygon({ 
    map: map, 
    paths: polypath, 
    strokeColor: scolor, 
    strokeOpacity: 0.5, 
    strokeWeight: 2, 
    fillColor: fcolor, 
    fillOpacity: 0.5 
}); 

addPolygonClick(tmppoly,mdata); 
plot_polygons.push(tmppoly); 

... 

function addPolygonClick(poly,html) { 

    infowindow = new google.maps.InfoWindow(
    { 
     content: html 
    }); 

    google.maps.event.addListener(poly,'click', function(event) { 
     this.setOptions({fillColor: "#000000"}); 
     infowindow.open(map); 
    }); 

} 

Answer 1

는 작동이 방지 될 수있는 몇 가지 문제가 있습니다 :

1 : 당신은 그것을를 만들기 위해, 정보창의 앞에 var에 필요 지역 변수 :

var infowindow = new google.maps.InfoWindow(... 

그렇기 때문에 새 클릭 목록을 추가 할 때마다 infowindow 변수가 교체됩니다 ener.

2 : 당신은 정보창 (: http://code.google.com/apis/maps/documentation/javascript/reference.html#InfoWindowOptions 참조)에 대한 위치 또는 앵커를 지정해야합니다.

유일한 유효한 앵커는 마커이므로 '위치'속성을 지정하고 싶을 것입니다. '위치'는 유효한 google.maps.LatLng 개체 여야합니다. 위치로 사용할 다각형의 중심을 계산하는 것이 좋습니다.

map이 전역 변수인지 확인해야하지만 코드의 나머지 부분을 살펴볼 필요가 있습니다.

Answer 2

귀하의 질문에 대한 유용한 제안을 드릴 수 있습니다.

먼저 'infowindow.open (map, anchor? : MVCObject)'메서드에 대한 식을 알아야합니다. google api v3에서 말한 것처럼 핵심 API에서 유일한 앵커는 Marker 클래스입니다. 다각형 클래스는 조건과 일치하지 않지만 다른 방식으로도 구현할 수 있습니다.

var polygon = new google.maps.Polygon({ 
    paths: PGpoints, //The PGpoints is the collection of points around this polygon. 
    map: map, 
    strokeColor: colory, 
    strokeOpacity: 0.6, 
    strokeWeight: 1, 
    fillColor: colory, 
    fillOpacity: 0.35  
}); 

polygon.set("Info", idy); // Set some attributes for adding extra information into this polygon. 

google.maps.event.addListener(polygon, 'click', function() { 
    var infoWindow = new google.maps.InfoWindow(); 
    infoWindow.setContent("Information : " + polygon.get("Info")); 

    // 'laty,lngy' is the location of one point in PGpoints, which can be chosen as you wish 
    infoWindow.setPosition(new google.maps.LatLng(laty,lngy));  
    infoWindow.open(map); 
}); 

위의 코드는 테스트를 통과했으며, 직접 사용할 수 있습니다. 그런 다음 하나의 다각형을 클릭하면 infoWindow가지도 위에 나타납니다.

Answer 3

이 https://developers.google.com/maps/documentation/javascript/examples/event-closure을 살펴보고 위의 응답과 결합하여 다각형 배열의 각 다각형에 고유 한 메시지를 할당하십시오.

각 폴리곤에 대해 고유 한 메시지가있는 하나의 레이어에 여러 개의 다각형이있는 작업도하고 있습니다. 나는 아직 성공하지 못했다. 위의 응답으로 표시 할 정보창이 있지만 모든 다각형에 대해 동일한 메시지가 표시됩니다. 문제가 해결되면 해결책을 게시 할 것입니다.