JavaScript API v3을 사용하여 Google 지도에 정보 창을 포함하는 여러 마커를 쉽게 표시하려면 어떻게 해야 합니까?
- Mary-Kate Olsen원래의
- 2024-12-23 15:48:12760검색
Google Maps JS API v3에서 여러 마커 표시 단순화
Google Maps JavaScript API로 작업할 때 여러 마커를 표시하려면 복잡한 구현이 필요한 경우가 많습니다. . 이 기사는 정보 창과 함께 일련의 마커를 표시하려는 초보자를 위한 간단한 솔루션을 제공합니다.
문제:
해당 이름, 좌표가 있는 위치 배열을 고려해 보겠습니다. 및 참조 값. 목표는 지도에 각 위치에 대한 마커를 배치하고 마커 클릭 시 이름과 함께 정보 창을 표시하는 것입니다.
해결책:
HTML 및 CSS:
<!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?key=YOUR_API_KEY"
type="text/javascript"></script>
</head>
<body>
<div>
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>
설명:
- 생성 지도와 마커를 표시하는 정보 창
- 위치 배열을 반복하고 각 위치에 대한 마커 개체를 만듭니다.
- 지도에 마커를 추가합니다.
- 이벤트 리스너를 사용하여 정보 창을 연결합니다. 각 마커를 사용하여 위치 이름을 표시합니다.
결과:
실행 시 코드는 입력 배열의 위치를 나타내는 여러 마커가 포함된 Google 지도를 생성합니다. 마커를 클릭하면 해당 이름을 표시하는 정보 창이 열립니다.
클로저 참고:
코드는 클로저를 활용하여 마커와 위치 인덱스를 이벤트 리스너에 인수로 전달합니다. . 클로저에 대해 잘 모르는 경우 Mozilla 개발자 센터에서 해당 주제에 대한 유용한 가이드를 제공합니다.
위 내용은 JavaScript API v3을 사용하여 Google 지도에 정보 창을 포함하는 여러 마커를 쉽게 표시하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
JavaScript css html Array Object if for require using Event map JS this location display input windows
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.