Google지도 API를 동일한지도에서 여러 마커로 사용하는 방법

Question

Google지도 API를 사용하려면 다음 스크립트를 사용하는 것이 좋습니다.하지만 둘 이상의 마커가있는지도를 만들어야합니다 (풍선 모양의 아이콘을 가리키며) 나는 각 마커가지도의 다른 영역 (예 : 다른 좌표)을 가리 키도록해야합니다. 어떻게 할 수 있습니까?

<script type="text/javascript"> 
<%=ScriptText%> 
</script> 

내 <% = ScriptText %> 내가 만들 것이다 문자열이 될 것입니다 : 내가 변수로 스크립트 텍스트를 전달하는 경우

<script type="text/javascript"> 

     function load() { 

     var map = new GMap2(document.getElementById("map")); 
     var marker = new GMarker(new GLatLng(<%=coordinates%>)); 

     var html="<img src='simplemap_logo.jpg' width='20' height='20'/> " + 
      "<%=maptitle%><br/>" + 
      "<%=text%>"; 



     map.setCenter(new GLatLng(<%=coordinates%>), <%=zoom%>) 
     map.setMapType(G_HYBRID_MAP); 
     map.addOverlay(marker); 
     map.addControl(new GLargeMapControl()); 
     map.addControl(new GScaleControl()); 
     map.addControl(new GMapTypeControl()); 


     marker.openInfoWindowHtml(html); 
     } 

     //]]> 
     </script> 

또 하나의 문제는, 같은 것을 말할 수 ScriptText라는 Friend 또는 Public 변수에 값을 할당하면 스크립트가 여전히 실행되고 제대로 작동합니까? (자바 스크립트에서 내 문맹으로 인해 STRING으로 빌드하는 방식에 따라 스크립트를 동적으로 만들고 다르게 만들기 위해이 작업을 수행하고 있습니다.)

Answer 1

obeattie와 gregers가 모두 적합합니다.지도에 오버레이를 추가 할 때

GLatLngBounds 객체에 추가 할 때하는 계산

1. : 일반적으로, 당신은 당신이 나중에에-두 번 이상 사용하는 배열의 어떤 종류의 마커 매개 변수를 저장해야 료를 마커를 추가

   var latlng1 = [ 
       new GLatLng(48.1234, -120.1234), 
       new GLatLng(48.5678, -120.5678), 
       new GLatLng(48.9101, -120.9112), 
       new GLatLng(48.1121, -120.1314), 
       new GLatLng(48.3145, -120.1516), 
       new GLatLng(48.1617, -120.1718), 
       new GLatLng(48.1819, -120.1920), 
       new GLatLng(48.2021, -120.2122) 
   ]; 
   

   코드 : 중심점과 줌 레벨

배열 또는 마커 같은 객체의 배열, 뭔가 같을 것이다 유사 LD 모습 뭔가 :

클라이언트 측 자바 스크립트 내부 서버 측 스크립트를 사용하는 방법에 대한 질문에 대해서는

// assume that map1 is an instance of a GMap2 object 

    // #0 -- google maps api requires us to call setCenter first before calling any other operation on the map 
    map1.setCenter(new GLatLng(0, 0), 0); 

    // #1 -- add markers 
    for (var i = 0; i < latlng1.length; i++) 
    { 
    var marker = new GMarker(latlng1[ i ]); 
    map1.addOverlay(marker); 
    } 

    // #2a -- calculate center 
    var latlngbounds = new GLatLngBounds(); 
    for (var i = 0; i < latlng1.length; i++) 
    { 
    latlngbounds.extend(latlng1[ i ]); 
    } 

    // #2b -- set center using the calculated values 
    map1.setCenter(latlngbounds.getCenter(), map1.getBoundsZoomLevel(latlngbounds)); 

, 그래 당신이 그들을 함께 혼합 할 수 있습니다.

<script type="text/javascript"> 
    var latlng1 = new Array(); 
</script> 
<script type="text/javascript"> 
    <% 
     do until rs.eof 
      %> 
      latlng1.push(new GLatLng(parseFloat('<%= rs("Lat") %>'), parseFloat('<%= rs("Lng") %>'))); 
      <% 
      rs.movenext 
     loop 
    %> 
</script> 

난에서 기사를 게시 한 : 당신의 설명으로 판단, 나는 이것이 당신이해야 할 일을 생각 나는 내 게시물 (위 참조)을 편집 할 수 없습니다입니다 http://salman-w.blogspot.com/2009/03/zoom-to-fit-all-markers-polylines-or.html

Answer 2

원하는 각 위치에 대해 새 GMarker을 만들어야합니다 지도에 표시하십시오. GMarker에는 here을 사용할 수있는 훌륭한 설명서가 있습니다.

GMarker을 만들려면 먼저 설명서에서 마커를 놓을 위치를 나타내는 GLatLng을 만들어야합니다. 풍선에있는 콘텐츠를 원한다는 언급은하지 않았으므로, 나는 그것이 당신이 쫓고있는 마커 일 뿐이라고 추측합니다. 귀하의 경우, 코드는 아마 다음과 같이 보일 것입니다 :

var markerCoords = [ 
    new GLatLng(<latitude>, <longitude>), 
    new GLatLng(<latitude>, <longitude>), 
    [...] 
]; 

for (coord in markerCoords){ 
    map.addOverlay(new GMarker(coord)); 
}; 

을 당신이 아마 여기에 무슨 일이 일어나고 있는지 정확히 알 수 있습니다 확신 해요,하지만 단지의 경우, 내가 GLatLng 객체의 배열을 생성 (이 될 수 있습니다 임의의 길이의 [bounds haha] 이내), 배열에 정의 된 각 GLatLng에 대한 맵에 마커를 추가하여 반복합니다.

마커를 많이 만들려면 Marker Manager을 사용하는 것이 유용 할 것입니다. 마커를 많이 렌더링하는 속도가 빨라지므로 (마커를 화면에 표시하지 않고 화면에 응축하면 안됩니다 화면의 한 영역에 많은 정보가있는 경우).

Answer 3

obeattie가 질문에 대한 답변을 꽤 잘했습니다. 그러나 예제 코드에서는 마커가 포함 된 영역으로 맵을 확대하는 것이 좋습니다. 여러 개의 마커로이 작업을 수행하려면 각 마커에 대해 확장하는 GLatLngBounds을 만들 수 있습니다. 그런 다음 bounds 객체의 마커 모음에 맞는 가운데와 확대/축소를 얻을 수 있습니다.

var markersBounds = GLatLngBounds(); var coord = null; for (coord in markerCoords){ coord = new GMarker(coord); map.addOverlay(); markersBounds.extend(coord); };

var markersCenter = markersBounds.getCenter(); 
var markersZoom = G_HYBRID_MAP.getBoundsZoomLevel(markersBounds); 

map.setCenter(markersCenter, markersZoom); 

은 내가 G_HYBRID_MAP 약 100 % 확실하지 않다. getBoundsZoomLevel이지만 올바르게 기억한다면 G_HYBRID_MAP은 GMapType의 인스턴스입니다.

Answer 4

를, 그래서 ' 일부 개정판을 게시 할 것입니다. 아니고 정확하게 당신이 원하는 그것의 단지 대략적인 윤곽 :

var map; 
var markers = new Array(); 
markers.push(
    { 
     latlng: new GLatLng(parseFloat('47.59'), parseFloat('-120.65')), 
     name: 'Some html here' 
    } 
); 
markers.push(
    { 
     latlng: new GLatLng(parseFloat('48.84'), parseFloat('-122.59')), 
     name: 'Some html here as well' 
    } 
); 
markers.push(
    { 
     latlng: new GLatLng(parseFloat('47.83'), parseFloat('-120.01')), 
     name: 'And some more html...' 
    } 
); 
function create_gmarker(marker) 
{ 
    var gmarker = new GMarker(marker.latlng); 
    GEvent.addListener(gmarker, 'click', function() { 
      gmarker.openInfoWindowHtml(marker.name); 
     } 
    ); 
    return gmarker; 
} 
function initialize_gmap() 
{ 
    if (GBrowserIsCompatible()) 
    { 
     // initialize map etc here and other yada yada 
     for (var i in markers) 
     { 
      map.addOverlay(create_gmarker(markers[ i ])); 
     } 
    } 
} 

또한 순진 자바 스크립트 [배열]의 사용 및 {목적}을 보여줍니다 위의 예. 당신은 어떤 것을 사용해야합니다 :)

Answer 5

나는 이와 비슷한 것을 가지고 있습니다 만, 이벤트가 작동하지 않습니다. 객체 생성자 안에 리스너를 추가 할 수 있습니까?

//Localization object onstructor 
function Localization(width, height, description, img_source){ 
    this.point = new GLatLng(width, height); 
    this.marker = new GMarker(this.point); 
    this.description = description; 
    this.img_source = img_source; 
    GEvent.addListener(this.marker, "click", function(){marker.openInfoWindowHtml(this.description);}); 
} 

//map localizations to show on map 
var localizations = [ 
    new Localization(52.9015797, 15.2602200, 'Poznań1', 'eye1'), 
    new Localization(52.9025797, 15.1602200, 'Poznań2', 'eye2'), 
    new Localization(52.9035797, 15.2702200, 'Poznań3', 'eye3'), 
    new Localization(52.9045797, 15.2102200, 'Poznań4', 'eye4'), 
] 

var map = new GMap2(document.getElementById("mapa")); 
map.setCenter(localizations[3].point, 13); 
map.setUIToDefault(); 


for(i=0; i < localizations.length; i++){ 
    localization=localizations[i]; 
    map.addOverlay(localization.marker); 
    localization.marker.openInfoWindowHtml(localization.description); 
}