Отображение нескольких маркеров на карте с собственными информационными окнами - PullRequest
3 голосов
/ 20 мая 2010

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

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

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


                                    });

Ответы [ 5 ]

6 голосов
/ 20 мая 2010

Проблема в вашем звонке на 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);
    });
}
0 голосов
/ 05 декабря 2018

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

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

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/

0 голосов
/ 23 ноября 2011

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

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

0 голосов
/ 16 сентября 2010
0 голосов
/ 29 июня 2010

Вот что работает (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/

...