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

Question

Итак, у меня есть следующий скрипт для использования 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 type="text/javascript">
<%=ScriptText%>
</script>

и мой <%=ScriptText%> будет строкой, которую я создам и присвою ее значение Friend или Public переменной, называемой ScriptText, будет ли она по-прежнему работать и работать правильно?(я делаю это, чтобы сделать мой скрипт динамичным и различным в зависимости от того, как я его создаю как СТРОКУ, из-за моей неграмотности в JavaScript; P)

Answer 1

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

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

Answer 2

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

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

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

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

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

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

Answer 3

Обитти довольно хорошо ответил на ваш вопрос.Но из вашего примера кода видно, что вы также хотите, чтобы карта масштабировалась до области, содержащей маркеры.Чтобы сделать это с несколькими маркерами, вы можете создать 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);

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

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