Как использовать 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, будет ли она по-прежнему работать и работать правильно? (я делаю это, чтобы сделать мой сценарий динамичным и отличным от него на основе того, как я его строю как STRING, из-за моей неграмотности в javascripting; P)

Answer 1

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

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, определенного в массиве.

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

Answer 3

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

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

Answer 4

obeattie ответила на ваш вопрос довольно хорошо. Но из вашего примера кода кажется, что вы также хотите, чтобы карта приблизилась к области, содержащей маркеры. Чтобы сделать это с несколькими маркерами, вы можете создать GLatLngBounds , который вы расширяете для каждого маркера. Затем вы можете получить центр и масштаб, который будет соответствовать вашей коллекции маркеров, из объекта bounds.

var markersBounds = GLatLngBounds(); var coord = null; for (coord in markerCoords){ coord = new GMarker(coord); map.addOverlay(); markersBounds.extend(coord); };</p> <pre><code>var markersCenter = markersBounds.getCenter(); var markersZoom = G_HYBRID_MAP.getBoundsZoomLevel(markersBounds); map.setCenter(markersCenter, markersZoom);

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