Как использовать API карт Google с несколькими маркерами на одной карте

Итак, у меня есть следующий script, чтобы использовать API карт google, все это прекрасно, но мне нужно создать карту с более чем одним маркером (значок в форме шара, указывающий на что-то), и мне нужно, чтобы каждый из них эти маркеры указывают на другую область карты (т.е. разные координаты), как я могу это сделать?

<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 как переменную, скажем что-то вроде:

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

и my <% = ScriptText% > будет строкой, которую я буду строить и назначить ее значение переменной Friend или Public, называемой ScriptText, будет ли она выполняться и работать правильно? (я делаю это, чтобы сделать мой script динамический и другой в зависимости от того, как я его создаю как STRING, из-за моей неграмотности в javascripting; P)

ОТВЕТЫ

Ответ 1

obeattie и gregers оба правильны. В общем, вам нужно сохранить параметры маркера в каком-то массиве, который вы позже будете использовать по меньшей мере дважды:

  • при добавлении наложения к карте
  • при добавлении его в объект 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 ) );

Что касается вашего вопроса об использовании серверной стороны script внутри 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

Ответ 2

Вам нужно будет создать новый GMarker для каждого места, которое вы хотите отметить на карте. Имеется неплохая документация здесь для GMarker s.

Чтобы создать GMarker, вы увидите из документации, в которой вам сначала нужно создать GLatLng, представляющий местоположение, в которое вы хотите пометить маркер. Вы не упомянули о том, что хотите получить какой-либо контент на воздушном шаре, поэтому я предполагаю, что это только маркер. В вашем случае код, вероятно, будет выглядеть примерно так:

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

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

Я уверен, что вы, вероятно, можете точно сказать, что происходит здесь, но на всякий случай я создаю массив объектов GLatLng (это может быть любой длины [в пределах haha]), а затем перебрать его, добавляя маркеры к карте для каждого GLatLng, определенного в массиве.

Если вы планируете создавать множество маркеров, вам, вероятно, будет полезно использовать Marker Manager, который ускорит рендеринг большого количества маркеров одновременно (не рендеринг маркеров вне экрана и сжатие на экране, если в одной области экрана много).

Ответ 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);

код >

Я не уверен на 100% о G_HYBRID_MAP. getBoundsZoomLevel, но если я правильно помню, G_HYBRID_MAP является экземпляром GMapType.

Ответ 4

У меня есть что-то вроде этого, но события не работают. Можно ли добавить слушателей внутри конструктора объекта?

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

Ответ 5

Я не могу редактировать свой пост (см. выше), поэтому я опубликую некоторые исправления. Это не совсем то, что вы хотите, его просто грубая схема:

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

В приведенном выше примере также показано наивное использование javascript [массивов] и {объектов}. Вы должны использовать некоторые:)