Отображение нескольких маркеров на карте с их собственными информационными окнами

Мне нужно отобразить несколько маркеров на карте, каждый со своим информационным окном. Я создал отдельные маркеры без проблем, но не знаю, как создать информационные окна для каждого.

Я создаю карту с помощью V3 API на веб-сайте на основе ASP, при этом маркеры создаются из набора записей БД. Маркеры создаются путем перебора rs и определения marker() с соответствующими переменными:

            var myLatlng = new google.maps.LatLng(lat,long);
            var marker = new google.maps.Marker({
                    map: map,
                    position: myLatlng,
                    title: 'locationname',
                    icon: 'http://google-maps-icons.googlecode.com/files/park.png'
            });

Это создает все соответствующие маркеры в их правильных местах.

Что мне нужно сделать сейчас, и я не уверен, как это сделать, это дать каждому из них свое уникальное информационное окно, которое я могу использовать для отображения информации и ссылок, относящихся к этому маркеру.

Источник

                <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
                <script language="javascript">
                $(document).ready(function() {

                     //Google Maps 
                        var myOptions = {
                          zoom: 5,
                          center: new google.maps.LatLng(-26.66, 122.25),
                       mapTypeControl: false,
                          mapTypeId: google.maps.MapTypeId.ROADMAP,
                       navigationControl: true,
                       navigationControlOptions: {
                         style: google.maps.NavigationControlStyle.SMALL
                       }

                        }

                        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

                      <!-- While locations_haslatlong not BOF.EOF -->
                            <% While ((Repeat1__numRows <> 0) AND (NOT locations_haslatlong.EOF)) %>
                      var myLatlng = new google.maps.LatLng(<%=(locations_haslatlong.Fields.Item("llat").Value)%>,<%=(locations_haslatlong.Fields.Item("llong").Value)%>);
                      var marker = new google.maps.Marker({
                       map: map,
                       position: myLatlng,
                       title: '<%=(locations_haslatlong.Fields.Item("ldescription").Value)%>',
                       icon: 'http://google-maps-icons.googlecode.com/files/park.png',
                       clickable: true,
                      }); 
                      <% 
                      Repeat1__index=Repeat1__index+1
                      Repeat1__numRows=Repeat1__numRows-1
                      locations_haslatlong.MoveNext()
                      Wend
                      %>           
                            <!-- End While locations_haslatlong not BOF.EOF -->

                      google.maps.event.addListener(marker, 'click', function() {
                      infowindow.open(map,marker);
                      });

                      google.maps.event.addListener(marker, 'dblclick', function() {
                      map.setZoom(14);
                      });


                                    });

jquery google-maps-api-3 google-maps-markers asp-classic vbscript
person thewinchester    schedule 20.05.2010    source источник

Ответы (5)


arrow_upward
6
arrow_downward

Проблема в вашем вызове addListener()

Пока вы перебираете свой набор записей и записываете javascript снова и снова, снова и снова для добавления маркера на карту, вы вызываете прослушиватель событий только один раз. Кроме того, вы никогда не создаете объекты InfoWindow введите, так что вам никогда не на что будет ссылаться open().

Быстрое и грязное решение состоит в том, чтобы добавить это после создания marker, но до завершения цикла While.

var infowindow = new google.maps.InfoWindow({ 
    content: '<%=(locations_haslatlong.Fields.Item("field_or_fields_containing_data_for_info_window").Value)%>' 
});
google.maps.event.addListener(marker, 'click', function() {
      infowindow.open(map,marker);
});

Но не делайте этого — вы используете VB для написания полностью избыточного Javascript для вас, тогда как вы могли бы использовать VB для получения того, что вам нужно, а затем позволить Javascript выполнять необходимую вам работу с данными.

Лучший способ сделать то, что вы пытаетесь сделать, это переписать ваш VB, чтобы создать массив объектов Javascript, каждый из которых содержит информацию о парке. Затем используйте Javascript, чтобы перебрать этот массив и настроить для себя маркеры и связанные с ними информационные окна.

Изложение предлагаемого решения:

// Create an array to hold a series of generic objects
// Each one will represent an individual marker, and contain all the 
// information we need for that marker.  This way, we can reuse the data
// on the client-side in other scripts as well.
var locations_array = [<%
While (
    (Repeat1__numRows <> 0) 
    AND (NOT locations_haslatlong.EOF)
) 
%>
{ 
latitude: <%=(locations_haslatlong.Fields.Item("llat").Value)%>,
longitude: <%=(locations_haslatlong.Fields.Item("llong").Value)%>,
title: "<%=(locations_haslatlong.Fields.Item("ldescription").Value)%>",
infoWindowContent: "<%=(locations_haslatlong.Fields.Item("field_or_fields_containing_data_for_info_window").Value)%>"
},
<% 
  Repeat1__index=Repeat1__index+1
  Repeat1__numRows=Repeat1__numRows-1
  locations_haslatlong.MoveNext()
  Wend
%>];

var x = locations_array.length;
while (--x) {
    // Grab an individual park object out of our array
    var _park = locations_array[x]
    var myLatlng = new google.maps.LatLng(_park.latitude,_park.longitude);
    var marker = new google.maps.Marker({
        map: map,
        position: myLatlng,
        title: _park.title,
        icon: 'http://google-maps-icons.googlecode.com/files/park.png',
        clickable: true,
    }); 
    var infowindow = new google.maps.InfoWindow({ 
        content: _park.infoWindowContent
    });
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map,marker);
    });
}
person Sean Vieira    schedule 20.05.2010
comment
Спасибо, это привело меня к просветлению (и лучшему пониманию использования массивов). Просто похоже, что некоторые из выходных данных JS, которые я получаю, немного глючат, из-за чего карта не загружается. Firebug сообщает о следующей проблеме: отсутствует } после списка свойств, строка 85. Я бросил копию полученного исходного кода по адресу: sites.google.com/site/forestproductswa Единственное отличие этой строки состоит в том, что результат поля, используемого для заполнения infoWindowContent в этой строке, содержит пробел. В остальном все выглядит идеально, и все сбалансировано. - person thewinchester; 21.05.2010
comment
@thewinchester, извиняюсь, у меня была опечатка в части генерации массива. (Когда мы заполняем title и infoWindowContent, мы ожидаем строки, и поэтому должны заключать данные в кавычки. Я не включил их в свой первоначальный ответ.) Я отредактировал свой ответ. - person Sean Vieira; 21.05.2010
comment
Спасибо, наконец-то разобрался. - person thewinchester; 24.05.2010
comment
Отлично! Рад, что смог быть чем-то полезен! - person Sean Vieira; 24.05.2010
comment
Просто пытаюсь найти «правильный» способ сделать это - выглядит потрясающе. ... Я думаю, вы имеете в виду:locations_array[x] - person therealsix; 15.02.2011

arrow_upward
0
arrow_downward

Вот что работает (RoR/Rails/Ruby on Rails):

<script type="text/javascript">
  function initialize() {
    var myOptions = {
      zoom: 12,
      center: new google.maps.LatLng(48.842, 2.34),
      // HYBRID ROADMAP SATELLITE TERRAIN
      mapTypeId: google.maps.MapTypeId.SATELLITE
    }
    var map = new google.maps.Map(document.getElementById("map_canvas"),
                                  myOptions);

<% @tiles.each do |tile| %>
var image_id<%= tile.id %> = '<%= tile.photo.url(:icon) %>';
var myLatLng_id<%= tile.id %> = new google.maps.LatLng(<%=h tile.lat %>,<%=h tile.long %>);
var tileMarker_id<%= tile.id %> = new google.maps.Marker({
    position: myLatLng_id<%= tile.id %>,
    map: map,
    clickable: true,
    icon: image_id<%= tile.id %>
});

var infowindow_id<%= tile.id %> = new google.maps.InfoWindow({ 
    content: '<a href="<%= tile.photo.url(:original) %>"> <img src="<%= tile.photo.url(:large) %>" height="400" ALIGN="left" border="None"></a>'
 //'Tile: <%= tile.id %><BR/> User: <%= tile.user_id %>'
});
google.maps.event.addListener(tileMarker_id<%= tile.id %>, 'click', function() {
      infowindow_id<%= tile.id %>.open(map,tileMarker_id<%= tile.id %>);
});

<% end %>

}

В коде VB/... была проблема, на которую уже был дан ответ: объект информационного окна должен быть уникальным для маркера, на который можно щелкнуть. Демонстрация на: http://www.geodepollution.org/

person user379217    schedule 29.06.2010

arrow_upward
0
arrow_downward

Вот отличное решение.

http://you.arenot.me/2010/06/29/google-maps-api-v3-0-multiple-markers-multiple-infowindows/

person Colin Wiseman    schedule 16.09.2010

arrow_upward
0
arrow_downward

Это кажется довольно хорошим.

http://www.usnaviguide.com/v3maps/v3multipleinfowindows.htm

person Sarkie    schedule 23.11.2011

arrow_upward
0
arrow_downward

Я попробовал код от Шона Виейры, я изо всех сил пытался заставить информационное окно показывать мне ту же информацию о соответствующих маркерах.

Если у вас такая же проблема, попробуйте: Здесь мы устанавливаем информацию (вы можете оставить любое имя), а затем последний будет использовать ее.

var marker = new google.maps.Marker({
            map: map,
            position: myLatlng,
            title: _park.title,
            info :    _park.infoWindowContent,    // note info here  
            clickable: true,
        });

далее см. «Содержимое», поэтому мы используем информацию, которую хотим установить для маркера.

 google.maps.event.addListener(marker , 'click', function() {

            infowindow.setContent(this.info);
            infowindow.open(map,this);
        });

Это сработало для меня.

Ссылка: https://tommcfarlin.com/multiple-infowindows-google-maps/

person Raj    schedule 05.12.2018