3

マップ上に複数のマーカーを表示し、それぞれに独自の情報ウィンドウを表示する必要があります。問題なく個々のマーカーを作成しましたが、それぞれの情報ウィンドウを作成する方法がわかりません。

ASP ベースの Web サイト内で V3 API を使用してマップを生成しています。マーカーは一連の DB レコードから作成されています。マーカーは、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);
                      });


                                    });
4

5 に答える 5

6

問題はあなたの呼び出しにありますaddListener()

マップにマーカーを追加するために、レコードセットをループして JavaScript を何度も何度も書き出す間、イベント リスナーを呼び出すのは 1 回だけです。また、 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 を使用してその配列をループし、マーカーとそれに関連する infoWindows をセットアップします。

提案されたソリューションの概要:

// 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);
    });
}
于 2010-05-20T03:05:08.037 に答える
0

これはかなり良いようです。

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

于 2011-11-23T15:24:57.280 に答える
0

ここに素晴らしい解決策があります。

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

于 2010-09-16T18:04:06.157 に答える
0

これが機能するものです（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/... コードに問題がありました。infowindow オブジェクトはクリック可能なマーカーごとに一意である必要があります。デモ: http://www.geodepollution.org/

于 2010-06-29T16:18:54.873 に答える
0

Sean Vieira のコードを試してみましたが、情報ウィンドウに同じ対応するマーカー情報を表示するのに苦労していました。

同じ問題がある場合は、試してみてください: ここでは情報を設定しています (任意の名前を保持できます)。後者はそれを使用します。

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/

于 2018-12-05T07:03:03.753 に答える