홈>
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
- 답변 # 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();
위의 전역 변수를 거의 정의하지 않는 것이 포함됩니다. 방법, 건배.댓글로 바이올린 연주
를 확인하세요.
관련 자료
- r - 알려진 영역의 원 만들기
- python - 팬더 누적 막대가 잘못된 하단 값으로 많은 개별 플롯을 생성 함
- 쿠키를 생성하지 않는 자바 스크립트 코드 문제
- 파이썬 코드로 Docker 컨테이너를 만드는 데 문제가 있습니다
- Visual Studio 2019에서 새 AspNet Core 21 Angular 프로젝트를 만들 때 개별 사용자 계정을 선택할 수 없습니다
- javascript - VARiable에 포함 된 JSON 데이터로 테이블을 작성하는 함수 작성시 문제점
- javascript - Google지도의 정보창에 대한 클릭 가능한 URL 링크를 만드는 데 도움이 필요합니다
- reactjs - 반응 상태를 사용하여 개별 버튼에 대해 onClick 효과를 만드는 문제
- php - if 블록 생성 문제
트렌드
- OpenCv의 폴더에서 여러 이미지 읽기 (python)
- 파이썬 셀레늄 모든 "href"속성 가져 오기
- html - 자바 스크립트 - 클릭 후 변경 버튼 텍스트 변경
- javascript - 현재 URL에서 특정 div 만 새로 고침/새로 고침
- JSP에 대한 클래스를 컴파일 할 수 없습니다
- JavaScript 변수를 HTML div에 '출력'하는 방법
- git commit - 자식 - 로컬 커밋 된 파일에 대한 변경을 취소하는 방법
- jquery - JavaScript로 현재 세션 값을 얻으시겠습니까?
- javascript - swiperjs에서 정지, 재생 버튼 추가
- python - 화면에서 찾은 요소를 찾을 수없는 경우 셀레늄
이것은 일반적으로 InfoWindows 마커에서 흔히 볼 수있는 문제이며 여러 가지 방법으로 해결할 수 있습니다. .open의 선택적 두 번째 매개 변수는 마커 일 수 있기 때문에 InfoWindow가 열리지 않습니다. 마커가 없으면 마커를 열 위치를 설정해야합니다. 일반적으로 InfoWindow 컨텐츠 문제를 해결하기 위해 함수 클로저를 사용합니다 (다른 방법도 있음).
(아마도 InfoWindow를 닫기 위해 리스너를 추가하고 싶을 것입니다.)