728x90
반응형
질문 : Google Maps JS API v3-간단한 다중 마커 예제
Google Maps API를 완전히 처음 사용합니다. 순환하고지도에 플로팅하려는 데이터 배열이 있습니다. 상당히 간단 해 보이지만 내가 찾은 모든 다중 마커 자습서는 매우 복잡합니다.
예를 들어 Google 사이트의 데이터 배열을 사용하겠습니다.
var locations = [
['Bondi Beach', -33.890542, 151.274856, 4],
['Coogee Beach', -33.923036, 151.259052, 5],
['Cronulla Beach', -34.028249, 151.157507, 3],
['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
['Maroubra Beach', -33.950198, 151.259302, 1]
];이 모든 점을 플로팅하고 이름을 표시하기 위해 클릭 할 때 infoWindow 팝업을 표시하고 싶습니다.
답변
다음과 같이 줄일 수있는 가장 간단한 방법입니다.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Google Maps Multiple Markers</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 500px; height: 400px;"></div>
<script type="text/javascript">
var locations = [
['Bondi Beach', -33.890542, 151.274856, 4],
['Coogee Beach', -33.923036, 151.259052, 5],
['Cronulla Beach', -34.028249, 151.157507, 3],
['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
['Maroubra Beach', -33.950198, 151.259302, 1]
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(-33.92, 151.25),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
</script>
</body>
</html>?? Codepen에서 편집 / 포크 →
스크린 샷
addListener 메서드에 콜백 인수를 전달할 때 일부 클로저 마법이 발생합니다. 클로저 작동 방식에 익숙하지 않은 경우 이것은 매우 까다로운 주제가 될 수 있습니다. 그렇다면 간단한 소개를 위해 다음 Mozilla 기사를 확인하는 것이 좋습니다.
출처 : https://stackoverflow.com/questions/3059044/google-maps-js-api-v3-simple-multiple-marker-example
728x90
반응형
'프로그래밍 언어 > HTML,CSS,JS' 카테고리의 다른 글
| 내장 DOM 메소드 또는 프로토 타입을 사용하여 HTML 문자열에서 새 DOM 요소 생성 (0) | 2021.08.09 |
|---|---|
| '$ (this)'와 'this'의 차이점 (0) | 2021.08.09 |
| Chrome을 사용하여 XML 대신 JSON을 반환하도록 ASP.NET Web API를 얻는 방법 (0) | 2021.08.09 |
| CSS를 사용하여 HTML5 입력의 placeholder 색상 변경 (0) | 2021.08.09 |
| HTML5 양식 요소의 유효성 검사 비활성화 (0) | 2021.08.06 |