1

重複の可能性：
Google Maps JSAPIv3-単純な複数のマーカーの例

私のプロジェクトでは、地図上にマーカーを作成し、情報ウィンドウを開いて情報を入力してデータベースに保存できますが、マーカーを作成してから別のマーカーを作成すると、最初のマーカーをクリックすると、 2番目のマーカーのinfowindow。

何が間違っている可能性がありますか？これは私のコードです:(これは簡略化されたコードであり、ここから完全なコードにアクセスできます）

var marker;
var infoWindow;
function goma()
{
  google.maps.event.addDomListener(teste, 'click', function() 
   {
     doMark = true;     
     doMark2 = false;           
    });
    markNow()

    function markNow(){   

//Marker1
google.maps.event.addListener(map, "click", function(event) 
{

    if (doMark == true && doMark2 == false){


    marker = new google.maps.Marker({
                 position: event.latLng, 
                 map: map, icon: 'Imagens/Oficina.png',
                 shadow: 'Imagens/Oficinasombra.png',
                 draggable : true,
                 animation: google.maps.Animation.DROP});
    google.maps.event.addListener(marker,'click',showWindow);

    doMark = false;
    }

    //Marker2
    else if (doMark2 == true && doMark == false){

   marker = new google.maps.Marker({
                 position: event.latLng, 
                 map: map, icon: 'Imagens/Lojas.png',
                 shadow: 'Imagens/Oficinasombra.png',
                 draggable : true,
                 animation: google.maps.Animation.DROP});
    google.maps.event.addListener(marker,'click',showWindow);


    doMark2 = false;
    }
}
);
var html = "<table>" +
   "<tr><td>Nome:</td> <td><input type='text' id='name'/> </td> </tr>" +
   "<tr><td>Endereco:</td> <td><input type='text' id='address'/></td> </tr>" +
   "<tr><td>Tipo:</td> <td><select id='type'>" +
   "<option value='oficina' SELECTED>oficina</option>" +
   "<option value='restaurante'>restaurante</option>" +
   "</select> </td></tr>" +
   "<tr><td></td><td><input type='button' value='Salvar' onclick='saveData()'/>     </td></tr>";

}

function showWindow(event) 
{
infoWindow.setContent(html); 
infoWindow.open(map,marker); 
}
4

3 に答える 3

3

これまで見てきたように、呼び出すinfowindow.open(map, marker)と最後のマーカーが呼び出されます。情報ウィンドウをこれにアタッチするには、クリックされたマーカーを特定する必要があります。

infowindow.open(map, marker);に変更infowindow.open(map, this);

あなたが示したページが機能していなかったため、古いバージョンを使用してデモを実行する必要がありました。これはmarkNow()の私のコードです 

function markNow(){   

google.maps.event.addListener(map, "click", function(event) 
{
    if (doMark == true){
    alert("Marker 1 Chosen");
    marker = new google.maps.Marker({
    position: event.latLng,
    map: map,
    icon: 'Imagens/Oficina.png',
    });
    }
    if (doMark2 == true){
    alert("Marker 2 Chosen");
    marker = new google.maps.Marker({ 
    position: event.latLng,
    map: map,
    icon: 'Imagens/Lojas.png',
    });
    }
    //if (doMark ==1)
    google.maps.event.addListener(marker, "click", function() 
    {
        infowindow.open(map, this);

    }


    );

}
);
var html = "<table>" +
   "<tr><td>Nome:</td> <td><input type='text' id='name'/> </td> </tr>" +
   "<tr><td>Ensdereco:</td> <td><input type='text' id='address'/></td> </tr>" +
   "<tr><td>Tipo:</td> <td><select id='type'>" +
   "<option value='oficina' SELECTED>oficina</option>" +
   "<option value='restaurante'>restaurante</option>" +
   "</select> </td></tr>" +
   "<tr><td></td><td><input type='button' value='Salvar' onclick='saveData()'/>        </td></tr>";

infowindow = new google.maps.InfoWindow({content: html});
}
于 2012-09-15T19:42:17.547 に答える
2

実際には、関数 markNow( ) の各マーカーに個別のリスナーをアタッチする必要があります。

 marker = new google.maps.Marker({
                     position: event.latLng, 
                     map: map, icon: 'Imagens/Oficina.png',
                     shadow: 'Imagens/Oficinasombra.png',
                     draggable : true,
                     animation: google.maps.Animation.DROP});
google.maps.event.addListener(marker,'click',showWindow);

その後-

function showWindow(event) 
{
infoWindow.setContent(html); 
infoWindow.open(map,marker); 
}
于 2012-09-14T06:14:18.847 に答える
0

これは、ループ変数が常に最後の値を参照しているという点で、クロージャの問題です。

Google Maps JSAPIv3-単純な複数マーカーの例を参照してください。

于 2012-09-13T21:21:59.797 に答える