-3

私は本当に何かに行き詰まっています。すべてのマップ マーカーの情報ウィンドウに同じ情報が表示されています。毎回コンテンツノードを保存するために使用する配列の末尾にあるコンテンツのようです。情報ウィンドウが適切なマーカーにアタッチされていないためだと確信しています

    var markers = [];
    var contentArray = [];
    var titleArray = [];
    var latlngArray = [];
    var map;
    //var infowindow;
    var concert;

    function defaultMap()
    {
        //Latitude: 38
        //Longitude: -97
        //window.alert("inside function");
        var mapOptions = {
          center:new google.maps.LatLng(38,-97),
          zoom:4,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map"),
                                  mapOptions);


           // window.alert("addMarkers the size of contentArray is: "+contentArray.length);
       //window.alert("addMarkers the size of the titleArray is: "+titleArray.length);
       // window.alert("addMarkers the size of the latLongArray is: "+latlngArray.length);



        //for(var i =0;i<2;i++)
        //{
        //    if(i == 0)
        //    {
        //        marker = new google.maps.Marker({
        //           position: new google.maps.LatLng(37.8172784,-96.8909115),
        //           map:map
        //        });
        //        markers.push(marker);
        //    }
        //    else
        //    {
        //        marker = new google.maps.Marker({
        //           position: new google.maps.LatLng(37.8172973,-96.8766355),
        //           map:map
        //        });
        //        markers.push(marker);
        //    }
        //    //markers[0] = new google.maps.LatLng(37.8172784,-96.8909115);
        //    //markers[1] = new google.maps.LatLng(37.8172973,-96.8766355);
        //    
        //}
        //addMarkers();
    }

    //function 


            //
            //{
            //infowindow = new google.maps.InfoWindow({
            //content:list
            //});
            //google.maps.event.addListener(marker,'click',function(){
            // infowindow.open(map,marker);
            //});


    function addMarkers()
    {
        //console.dir(contentArray[contentArray.length-1]);
        for(var i = 0;i <10;i++)
        {
            if(i == 0)
            {
                //window.alert("i = "+i);
                console.log(latlngArray[i]);
                var marker = new google.maps.Marker({
                   position:latlngArray[i],
                   animation:google.maps.Animation.DROP,
                   icon:'./images/club.png',
                    title:titleArray[i],
                   map:map
                });

                //marker.setMap(map);
                            var infowindow = new google.maps.InfoWindow({

                });

                google.maps.event.addListener(marker,'click',function()
                                              {
                                                //console.log(infowindow.getContent());
                                                infowindow.setContent(contentArray[i]);
                                                infowindow.open(map,this);
                                              });
                markers.push(marker);

            }
            else
            {
                console.log(latlngArray[i]);
                var marker = new google.maps.Marker({
                   position:latlngArray[i],
                   animation:google.maps.Animation.DROP,
                   icon:'./images/restaurant.png',
                   title:titleArray[i],
                   map:map
                });

                var infowindow = new google.maps.InfoWindow({});
                            //console.log(infowindow.getContent());

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

                  infowindow.setContent(contentArray[i]);
                  console.log(infowindow.getContent());
                  infowindow.open(map,this);
                });
                 markers.push(marker);
            }

            //console.log(i);
            //console.log(contentArray[i]);
        }
    }
4

2 に答える 2

0

このコードは、DBから取得したマップに複数のマーカーを配置したいすべての人にも適用されます

ライブプロジェクトのコードを貼り付けるつもりです。あなたはこれからいくつかの助けを得ることができます。

function latLongCallback(latitutde,longitutde){
 var latlng = new google.maps.LatLng(latitutde, longitutde);
    var options  = {zoom: 4, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP};
    var map      = new google.maps.Map(document.getElementById('map'), options);

    $.ajax({type: "GET",
      dataType: 'json',
     url: 'https://www.xyz.com/yourrfolder/markers.php',
    success: function(response){
         var total=response.length;
         var data_array,name,type,address,lat,lon,arrival,departure,notes;
          var infowindow = new google.maps.InfoWindow();   
       for(var i=0; i < total; i++){
            data_array=response[i];
            name=data_array['name'];
            id = data_array['id'];
            address=data_array['address'];
            arrival=data_array['arrival'];
            departure=data_array['departure'];
            notes=data_array['notes'];
            lat=data_array['lat'];
            lon=data_array['lon'];
            icon=data_array['icon'];
            sc_id=data_array['sc_id'];

var propPos = new google.maps.LatLng(lat,lon);
            propMarker = new google.maps.Marker({
                position: propPos,
                map: map,
                icon: icon,
                zIndex: 3
            });

var contentString = "<div style='font-size:9px;overflow:hidden'>"+name+"<br/><label class='label'>Location :</label> "+address+"<br/><label class='label'>Arrival :</label> "+arrival+"<br/><label class='label'>Departure :</label> "+departure+"<br/><label class='label'>Notes :</label> "+notes + "</div><div style='font-size:9px;overflow:hidden'><a href='#2' onclick="+xx+" class='popup-txt' style='font-size:11px; margin-top:3px;'>Message him</a><a href='#1' onclick="+invite+" class='popup-txt' style='font-size:11px; margin-top:3px; float:right;'>Invite Friend</a></div>"; 

   function bindInfoWindow(marker, map, infowindow, html) {
         google.maps.event.addListener(marker, 'click', function() {
                    infowindow.setContent(html);
                    infowindow.open(map, marker);
                });
 bindInfoWindow(propMarker, map, infowindow, contentString);
     }
    }
});
return; 
}

上記のjsで言及されているmarker.phpは次のとおりです

<?php 
  $data=array();
  $retrive_marker_query = "your query";
  $result               =    db_execute($retrive_marker_query);
  $cnt=0;

while ($row = mysql_fetch_assoc($result)){
 $name      = $row['name'];
 $id        = $row['fb_id'];
 $sc_id     = $row['id'];
 $address   = $row['location'];
 $lat       = $row['lat'];
 $lon       = $row['lon'];


   $data[$cnt]['name']    = $name;
   $data[$cnt]['id']      = $id;
   $data[$cnt]['sc_id']   = $sc_id;
   $data[$cnt]['address'] = $address;
   $data[$cnt]['lat']     = $lat;
   $data[$cnt]['lon']     = $lon;

   $cnt++;
   }
$data=json_encode($data);
 echo($data);
<?
于 2012-11-29T12:19:42.790 に答える
0

問題は、ループが終了すると i が 10 になることです。すべての情報ウィンドウに次のように表示されます。

 infowindow.setContent(contentArray[i]);

この問題を解決するには、次の 2 つの方法があります。

  1. 関数の閉鎖。createMarker 関数を使用して、情報ウィンドウのコンテンツをマーカーに関連付けます。 関数クロージャを使用した彼の例の 1 つであるMike Williams の v2 チュートリアルで説明されており、v3 に翻訳されています。
  2. コンテンツを含むマーカーメンバー変数は、「this」を参照してクリックリスナーでアクセスします。この同様の質問への回答は、これに役立つ場合があります。これは、マーカーのメンバー変数を使用する例です
于 2012-11-11T23:42:04.410 に答える