동일한 맵에 여러 마커가있는 Google Maps API를 사용하는 방법

StackOverflow https://stackoverflow.com/questions/605786

문제

따라서 Google Maps API를 사용하는 다음 스크립트가 있습니다. 모두 괜찮지 만 둘 이상의 마커 (풍선 모양의 아이콘이 무언가를 가리키는)가있는 맵을 만들어야하며 각 마커가 필요합니다. 지도의 다른 영역 (즉, 다른 좌표), 어떻게 할 수 있습니까?

<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>

한 가지 더 질문은 스크립트 텍스트를 변수로 전달하면 다음과 같은 것을 말합니다.

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

그리고 내 <%= scriptText%>는 ScriptText라는 친구 나 공개 변수에 값을 빌드하고 할당 할 문자열이 될 것입니다. 여전히 실행되고 제대로 작동합니까? (Javascripting의 문맹으로 인해 문자열로 구축하는 방법에 따라 스크립트를 역동적으로 다르게 만들기 위해이 작업을 수행하고 있습니다. P)

도움이 되었습니까?

해결책

Obeattie와 Gregers는 모두 옳습니다. 일반적으로 마커 매개 변수를 어떤 종류의 배열에 저장 해야하는데, 나중에 나중에 2 번 사용하게됩니다.

  1. 지도에 오버레이를 추가 할 때
  2. glatlngbounds 객체에 추가 할 때 중심점 및 줌 레벨을 계산합니다.

배열 또는 마커는 다음과 같은 객체 배열처럼 보입니다.

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 )
];

마커를 추가하기위한 코드는 다음과 비슷한 것으로 보입니다.

  // 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 ) );

클라이언트 측 JavaScript 내부의 서버 측 스크립트 사용에 대한 질문에 대해서는 함께 혼합 할 수 있습니다. 설명으로 판단하면 이것이 당신이해야 할 일이라고 생각합니다.

<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

다른 팁

새로운 것을 만들어야합니다 GMarker 지도에 표시하려는 각 장소에 대해. 이용 가능한 좋은 문서가 있습니다 여기 ~을 위한 GMarker에스.

a GMarker, 당신은 당신이 처음 만들어야한다는 문서에서 볼 수 있습니다. GLatLng 마커를 떨어 뜨릴 위치를 나타냅니다. 당신은 풍선에 내용을 원한다고 언급하지 않았으므로, 나는 그것이 당신이 따르는 마커 일 뿐이라고 가정합니다. 귀하의 경우, 코드는 아마도 다음과 같이 보일 것입니다.

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

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

나는 당신이 아마 여기서 무슨 일이 일어나고 있는지 정확히 말할 수 있다고 확신하지만, 만일 경우, 나는 배열을 만듭니다. GLatLng 물체 (이것은 길이가 모든 길이 일 수 있습니다. GLatLng 배열에 정의됩니다.

많은 마커를 만들 계획이라면 아마도 마커 관리자, 이는 많은 마커를 동시에 렌더링하는 속도를 높일 것입니다 (화면 오프 스크린 마커를 렌더링하지 않고 화면의 한 영역에 많이있는 경우 화면에 색상을 응축하지 않음).

Obeattie는 당신의 질문에 꽤 좋았습니다. 그러나 예제 코드에서 마커가 포함 된 영역으로 맵이 확대되기를 원하는 것 같습니다. 여러 마커 로이 작업을 수행하려면 glatlngbounds 각 마커에 대해 확장합니다. 그런 다음 바운드 객체에서 마커 모음에 맞는 중앙과 줌을 얻을 수 있습니다.

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.

나는 이런 것이 있지만 이벤트는 작동하지 않습니다. 물체 생성자 안에 리스너를 추가 할 수 있습니까?

//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);
}
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top