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>
?? 코드 펜 편집 / 포크 →
스크린 샷
콜백 인수를 addListener메소드에 전달할 때 발생하는 폐쇄 마법이 있습니다. 클로저 작동 방식에 익숙하지 않은 경우에는 매우 까다로운 주제 일 수 있습니다. 다음과 같은 모질라 기사에서 간단한 소개를 확인하는 것이 좋습니다.
답변
다음은 고유 title하고 infoWindow텍스트 가있는 여러 마커를로드하는 또 다른 예입니다 . 최신 Google Maps API V3.11로 테스트했습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Multiple Markers Google Maps</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.11&sensor=false" type="text/javascript"></script>
<script type="text/javascript">
// check DOM Ready
$(document).ready(function() {
// execute
(function() {
// map options
var options = {
zoom: 5,
center: new google.maps.LatLng(39.909736, -98.522109), // centered US
mapTypeId: google.maps.MapTypeId.TERRAIN,
mapTypeControl: false
};
// init map
var map = new google.maps.Map(document.getElementById('map_canvas'), options);
// NY and CA sample Lat / Lng
var southWest = new google.maps.LatLng(40.744656, -74.005966);
var northEast = new google.maps.LatLng(34.052234, -118.243685);
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
// set multiple marker
for (var i = 0; i < 250; i++) {
// init markers
var marker = new google.maps.Marker({
position: new google.maps.LatLng(southWest.lat() + latSpan * Math.random(), southWest.lng() + lngSpan * Math.random()),
map: map,
title: 'Click Me ' + i
});
// process multiple info windows
(function(marker, i) {
// add click event
google.maps.event.addListener(marker, 'click', function() {
infowindow = new google.maps.InfoWindow({
content: 'Hello, World!!'
});
infowindow.open(map, marker);
});
})(marker, i);
}
})();
});
</script>
</head>
<body>
<div id="map_canvas" style="width: 800px; height:500px;"></div>
</body>
</html>250 개의 마커 스크린 샷 :
Lat / Lng를 자동으로 무작위 화하여 고유하게 만듭니다. 이 예는 500, 1000, xxx 마커 및 성능을 테스트하려는 경우 매우 유용합니다.
답변
Google Maps API를 사용하기 시작한 사람들에게 인기가있는 것으로 보이므로 여기에 넣겠다고 생각했습니다. 클라이언트 쪽에서 렌더링되는 여러 마커는 아마도 많은 매핑 응용 프로그램의 성능 현명한 저하 일 것입니다. 벤치마킹, 수정이 어렵고 경우에 따라 브라우저 구현 차이, 클라이언트가 사용할 수있는 하드웨어, 모바일 장치, 목록에 문제가 있음을 확인하기도합니다.
이 문제를 해결하는 가장 간단한 방법은 마커 클러스터링 솔루션을 사용하는 것입니다. 기본 아이디어는 지리적으로 유사한 위치를 포인트 수가 표시된 그룹으로 그룹화하는 것입니다. 사용자가지도를 확대하면이 그룹이 확장되어 아래에 개별 마커가 표시됩니다.
아마도 가장 간단한 구현 방법은 markerclusterer 라이브러리입니다. 기본 구현은 다음과 같습니다 (라이브러리 가져 오기 후).
<script type="text/javascript">
function initialize() {
var center = new google.maps.LatLng(37.4419, -122.1419);
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var markers = [];
for (var i = 0; i < 100; i++) {
var location = yourData.location[i];
var latLng = new google.maps.LatLng(location.latitude,
location.longitude);
var marker = new google.maps.Marker({
position: latLng
});
markers.push(marker);
}
var markerCluster = new MarkerClusterer(map, markers);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>지도에 직접 추가되는 대신 마커가 배열에 추가됩니다. 그런 다음이 배열은 복잡한 계산을 처리하고 맵에 첨부 된 라이브러리로 전달됩니다.
이러한 구현은 클라이언트 측 성능을 크게 향상시킬뿐만 아니라 많은 경우 UI를 단순하고 덜 어수선하게 만들고 대규모로 데이터를 쉽게 요약 할 수있게합니다.
다른 구현 은 Google에서 제공합니다.
이것이 매핑의 뉘앙스에 익숙하지 않은 사람들에게 도움이되기를 바랍니다.
답변
비동기 버전 :
<script type="text/javascript">
function initialize() {
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));
}
}
function loadScript() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&' +
'callback=initialize';
document.body.appendChild(script);
}
window.onload = loadScript;
</script>답변
var arr = new Array();
function initialize() {
var i;
var Locations = [
{
lat:48.856614,
lon:2.3522219000000177,
address:'Paris',
gval:'25.5',
aType:'Non-Commodity',
title:'Paris',
descr:'Paris'
},
{
lat: 55.7512419,
lon: 37.6184217,
address:'Moscow',
gval:'11.5',
aType:'Non-Commodity',
title:'Moscow',
descr:'Moscow Airport'
},
{
lat:-9.481553000000002,
lon:147.190242,
address:'Port Moresby',
gval:'1',
aType:'Oil',
title:'Papua New Guinea',
descr:'Papua New Guinea 123123123'
},
{
lat:20.5200,
lon:77.7500,
address:'Indore',
gval:'1',
aType:'Oil',
title:'Indore, India',
descr:'Airport India'
}
];
var myOptions = {
zoom: 2,
center: new google.maps.LatLng(51.9000,8.4731),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), myOptions);
var infowindow = new google.maps.InfoWindow({
content: ''
});
for (i = 0; i < Locations.length; i++) {
size=15;
var img=new google.maps.MarkerImage('marker.png',
new google.maps.Size(size, size),
new google.maps.Point(0,0),
new google.maps.Point(size/2, size/2)
);
var marker = new google.maps.Marker({
map: map,
title: Locations[i].title,
position: new google.maps.LatLng(Locations[i].lat, Locations[i].lon),
icon: img
});
bindInfoWindow(marker, map, infowindow, "<p>" + Locations[i].descr + "</p>",Locations[i].title);
}
}
function bindInfoWindow(marker, map, infowindow, html, Ltitle) {
google.maps.event.addListener(marker, 'mouseover', function() {
infowindow.setContent(html);
infowindow.open(map, marker);
});
google.maps.event.addListener(marker, 'mouseout', function() {
infowindow.close();
});
} 전체 작업 예. 복사하여 붙여 넣기 만하면됩니다.
답변
에서 구글지도 API 샘플 :
function initialize() {
var myOptions = {
zoom: 10,
center: new google.maps.LatLng(-33.9, 151.2),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
setMarkers(map, beaches);
}
/**
* Data for the markers consisting of a name, a LatLng and a zIndex for
* the order in which these markers should display on top of each
* other.
*/
var beaches = [
['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]
];
function setMarkers(map, locations) {
// Add markers to the map
// Marker sizes are expressed as a Size of X,Y
// where the origin of the image (0,0) is located
// in the top left of the image.
// Origins, anchor positions and coordinates of the marker
// increase in the X direction to the right and in
// the Y direction down.
var image = new google.maps.MarkerImage('images/beachflag.png',
// This marker is 20 pixels wide by 32 pixels tall.
new google.maps.Size(20, 32),
// The origin for this image is 0,0.
new google.maps.Point(0,0),
// The anchor for this image is the base of the flagpole at 0,32.
new google.maps.Point(0, 32));
var shadow = new google.maps.MarkerImage('images/beachflag_shadow.png',
// The shadow image is larger in the horizontal dimension
// while the position and offset are the same as for the main image.
new google.maps.Size(37, 32),
new google.maps.Point(0,0),
new google.maps.Point(0, 32));
// Shapes define the clickable region of the icon.
// The type defines an HTML <area> element 'poly' which
// traces out a polygon as a series of X,Y points. The final
// coordinate closes the poly by connecting to the first
// coordinate.
var shape = {
coord: [1, 1, 1, 20, 18, 20, 18 , 1],
type: 'poly'
};
for (var i = 0; i < locations.length; i++) {
var beach = locations[i];
var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
shadow: shadow,
icon: image,
shape: shape,
title: beach[0],
zIndex: beach[3]
});
}
}답변
여기에지도 부동산을 저장하기 위해 작성한 다른 버전이 있습니다. 정보 창 포인터가 실제 위도 및 긴 마커 위에 위치하고 정보 창이 표시되는 동안 마커를 일시적으로 숨 깁니다.
또한 표준 ‘마커’할당을 없애고 마커 생성시 마커 배열에 새 마커를 직접 할당하여 처리 속도를 높입니다. 그러나 추가 속성이 마커와 정보창 모두에 추가되었으므로이 접근 방식은 다소 독창적입니다 …하지만 그게 나입니다!
이러한 정보창 질문에서는 표준 정보창 이 마커 포인트의 위도 및 경도에 배치되지 않고 마커 이미지의 상단에 배치 된다고 언급 되지 않습니다 . 이 작업을 수행하려면 마커 표시 여부를 숨겨야합니다. 그렇지 않으면 Maps API는 정보창 앵커를 마커 이미지 상단으로 다시 밀어 넣습니다.
‘마커’배열의 마커에 대한 참조는 나중에 필요할 수있는 추가 처리 작업 (숨김 / 표시, 좌표 잡기 등)에 대한 마커 선언 즉시 생성됩니다. 이렇게하면 마커 개체를 ‘marker’에 할당 한 다음 ‘marker’를 markers 배열에 밀어 넣는 추가 단계가 절약됩니다.
어쨌든, 정보창을 달리 도입하고 정보와 영감을 얻는 데 도움이되기를 바랍니다.
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;
var markers = [];
function init(){
map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 10,
center: new google.maps.LatLng(-33.92, 151.25),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var num_markers = locations.length;
for (var i = 0; i < num_markers; i++) {
markers[i] = new google.maps.Marker({
position: {lat:locations[i][1], lng:locations[i][2]},
map: map,
html: locations[i][0],
id: i,
});
google.maps.event.addListener(markers[i], 'click', function(){
var infowindow = new google.maps.InfoWindow({
id: this.id,
content:this.html,
position:this.getPosition()
});
google.maps.event.addListenerOnce(infowindow, 'closeclick', function(){
markers[this.id].setVisible(true);
});
this.setVisible(false);
infowindow.open(map);
});
}
}
google.maps.event.addDomListener(window, 'load', init);작동하는 JSFiddle 은 다음과 같습니다.
추가 참고이
Google 예제 데이터에서 숫자가있는 ‘locations’배열의 네 번째 위치를 알 수 있습니다. 이 예에서 주어진 것처럼 현재 루프 값 대신 마커 ID에이 값을 사용할 수도 있습니다.
var num_markers = locations.length;
for (var i = 0; i < num_markers; i++) {
markers[i] = new google.maps.Marker({
position: {lat:locations[i][1], lng:locations[i][2]},
map: map,
html: locations[i][0],
id: locations[i][3],
});
};