打开错误的信息窗口 Google Maps v3 [重复]

Posted 2023-02-23

【中文标题】打开错误的信息窗口 Google Maps v3 [重复]

【英文标题】：Opening wrong info window Google Maps v3 [duplicate]

【发布时间】：2012-09-06 22:31:43

【问题描述】：

可能重复：Google Maps JS API v3 - Simple Multiple Marker Example

在我的项目中，您可以在地图上创建标记，然后打开一个信息窗口以放置一些信息并保存在数据库中，但是当您创建一个标记时，如果您单击第一个标记，然后再创建另一个标记它会打开第二个标记的信息窗口。

有什么问题吗？这是我的代码： （这是简化代码，完整代码access here）

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

【参考方案1】：

调用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);

【参考方案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); 
 

【讨论】：

希望这能解决您的问题。如果您有任何问题，请告诉我

我尝试将此代码放在我的项目中，在 markNow();并超出功能，但不起作用=/。

您可以显示您所做更改的代码吗？某处可能有错误

我更新了我的代码，检查一下 =)，我不知道为什么不工作。标记没有打开，如果需要，您可以在我提出的链接上查看我的完整代码

您有一些错误。您的 var html 实际上无法在 showWindow 中访问。因此，您应该在全局范围内声明 var html 以及 var 标记；和 var infoWindow;然后像你一样分配文本。看看这个改变是否能解决。

【参考方案3】：

这是闭包的问题，​​因为您的循环变量总是引用最后一个值。

见Google Maps JS API v3 - Simple Multiple Marker Example。