保存按钮未附加到右侧信息窗口，谷歌地图

Posted 2023-05-07

【中文标题】保存按钮未附加到右侧信息窗口，谷歌地图

【英文标题】：Save Button Not attached to the Right InfoWindow, Google Map

【发布时间】：2016-03-26 17:55:49

【问题描述】：

添加删除功能并将我的标记添加到数组中后，保存按钮/保存功能不再附加到我的谷歌地图上的正确信息窗口。

如果我打开两个信息窗口，在两个信息窗口中输入信息，然后在我打开的第一个信息窗口上单击保存，它将更新最后一个使用“您提交”创建的信息窗口，并将其保存两次。我根据不同的堆栈溢出帖子尝试了一些不同的事情，包括在我的信息窗口的初始化周围添加一个迭代器，以及添加一个用于添加标记的外部函数，但这不起作用。我还确保在初始化之前声明了我的全局变量（如 map）。我是一个苦苦挣扎了好几天的人。

我确信这个问题围绕着我对信息窗口如何附加到数组中的标记的困惑。我的代码在下面的sn-p中。

        var markers = [];
        var uniqueId = 1;
        var marker;
        var infowindow;
        var map;
        var html;


        function initialize() 

          var mapOptions = 
            zoom: 8,
            center: 
              lat: 48.591130,
              lng: -119.682349
            ,

            mapTypeControlOptions: 
              mapTypeIds: ['roadmap']
            
          ;

          var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);

          //Attach click event handler to the map.
          google.maps.event.addListener(map, 'click', function(e) 

            //Determine the location where the user has clicked.
            var location = e.latLng;

            //Create a marker and placed it on the map.
            var marker = new google.maps.Marker(
              position: location,
              map: map,
            );


            //Set unique id
            marker.id = uniqueId;
            uniqueId++;
            markers.push(marker);


            //Attach click event handler to the marker.
            google.maps.event.addListener(marker, "click", function(e) 
              html = "<p style='color:#173e43;font-size:120%;font-weight:bold;text-align:center; width:150pxs; margin-top: 2px; margin-bottom:4px' >Add A Comment</p>" +
                "<table>" +
                "<tr><td>Issue/Idea:</td> <td> <textarea rows='1' cols='26'  id='name' style='height: 30px; width:150px' name='reply'></textarea></td> </tr>" +
                "<tr><td>Address:</td> <td><input type='text' id='address' style='width:150px'/></td> </tr>" +
                "</td></tr>";

              html += "<tr><td><input type = 'button' value = 'Delete' onclick = 'DeleteMarker(" + marker.id + ");' value = 'Delete' /></td>" +
                "<td><input type='button'  value='Submit' onclick='saveData(" + marker.id + ")'/></td></tr>";

              infowindow = new google.maps.InfoWindow(
                content: html
              );

              infowindow.setContent(html);
              infowindow.open(map, marker);
            );

            //Add marker to the array.
            markers.push(marker);

          );

        ;


        function DeleteMarker(id) 
          //Find and remove the marker from the Array
          for (var i = 0; i < markers.length; i++) 
            if (markers[i].id == id) 
              //Remove the marker from Map                  
              markers[i].setMap(null);

              //Remove the marker from array.
              markers.splice(i, 1);
              return;
            
          
        ;

        function saveData(id) 
          for (var i = 0; i < markers.length; i++) 
            if (markers[i].id == id) 

              var name = escape(document.getElementById("name").value);
              var address = escape(document.getElementById("address").value);
              var latlng = markers[i].getPosition();


              var url = "phpsqlinfo_addrow.php?name=" + name + "&address=" + address +
                 "&lat=" + latlng.lat() + "&lng=" + latlng.lng();

              downloadUrl(url, function(data, responseCode) 
                if (responseCode == 200 && data.length >= 1) 
                  document.getElementById("message").innerHTML = "Location added. Contents: name=" + name +", address=" + address+ " latlng=" +latlng;
                
              );

              infowindow.setContent("You submitted Contents: name=" + name +", address=" + address+ " latlng=" +latlng);
            
          
        

        function downloadUrl(url, callback) 
          var request = window.ActiveXObject ?
            new ActiveXObject('Microsoft.XMLHTTP') :
            new XMLHttpRequest;

          request.onreadystatechange = function() 
            if (request.readyState == 4) 
              request.onreadystatechange = doNothing;
              callback(request.responseText, request.status);
            
          ; 

          request.open('GET', url, true);
          request.send(null);

          function doNothing() 

        

        google.maps.event.addDomListener(window, 'load', initialize);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false">
</script>

<div id="dvMap" style="width: 1000px; height: 490px"></div>
<div id="message"></div>

【问题讨论】：

你的小提琴 Uncaught ReferenceError: saveData is not defined 出现 javascript 错误。请提供一个 Minimal, Complete, Tested and Readable example 来证明该问题。

据我所知，saveData 正在做正确的事情。为什么你认为它是错误的。

感谢 geocodezip，我清理了代码 sn-p 使其更具可读性。如果有人打开多个信息窗口，我的问题就会发生。假设我在 Walla Walla 上放置了一个标记，打开窗口并在其中输入信息，然后在 Sunshine Valley 放置第二个标记。如果我回到 Walla Walla 标记（不关闭任何窗口）并点击提交，Sunshine Valley 上方的窗口会显示“您提交了内容：name= Walla Walla”。最重要的是，它会在我的数据库中两次保存相同的 Walla Walla 信息。感谢您的帮助。

ID 必须是唯一的，getElementById() 将始终返回相同的元素，无论文档中有多少元素共享相同的 ID 属性

【参考方案1】：

好的，所以我移动了 push 语句，以便在声明 infowindow 后将标记推送到数组。这阻止了保存功能多次保存 html 内容。所以保存现在工作得很好，唯一的问题是我能够使用消息“你提交......”更新正确的信息窗口 它仍然只是更新我使用该消息打开的最后一个信息窗口。

        var markers = [];
        var uniqueId = 1;
        var marker;
        var infowindow;
        var map;
        var html;


        function initialize() 

          var mapOptions = 
            zoom: 8,
            center: 
              lat: 48.591130,
              lng: -119.682349
            ,

            mapTypeControlOptions: 
              mapTypeIds: ['roadmap']
            
          ;

          var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);

          //Attach click event handler to the map.
          google.maps.event.addListener(map, 'click', function(e) 

            //Determine the location where the user has clicked.
            var location = e.latLng;

            //Create a marker and placed it on the map.
            var marker = new google.maps.Marker(
              position: location,
              map: map,
            );


            //Set unique id
            marker.id = uniqueId;
            uniqueId++;
           

            //Attach click event handler to the marker.
            google.maps.event.addListener(marker, "click", function(e) 
              html = "<p style='color:#173e43;font-size:120%;font-weight:bold;text-align:center; width:150pxs; margin-top: 2px; margin-bottom:4px' >Add A Comment</p>" +
                "<table>" +
                "<tr><td>Issue/Idea:</td> <td> <textarea rows='1' cols='26'  id='name' style='height: 30px; width:150px' name='reply'></textarea></td> </tr>" +
                "<tr><td>Address:</td> <td><input type='text' id='address' style='width:150px'/></td> </tr>" +
                "</td></tr>";

              html += "<tr><td><input type = 'button' value = 'Delete' onclick = 'DeleteMarker(" + marker.id + ");' value = 'Delete' /></td>" +
                "<td><input type='button'  value='Submit' onclick='saveData(" + marker.id + ")'/></td></tr>";

              infowindow = new google.maps.InfoWindow(
                content: html
              );

              infowindow.setContent(html);
              infowindow.open(map, marker);
            );

            //Add marker to the array.
            markers.push(marker);

          );

        ;


        function DeleteMarker(id) 
          //Find and remove the marker from the Array
          for (var i = 0; i < markers.length; i++) 
            if (markers[i].id == id) 
              //Remove the marker from Map                  
              markers[i].setMap(null);

              //Remove the marker from array.
              markers.splice(i, 1);
              return;
            
          
        ;

        function saveData(id) 
          for (var i = 0; i < markers.length; i++) 
            if (markers[i].id == id) 

              var name = escape(document.getElementById("name").value);
              var address = escape(document.getElementById("address").value);
              var latlng = markers[i].getPosition();


              var url = "phpsqlinfo_addrow.php?name=" + name + "&address=" + address +
                 "&lat=" + latlng.lat() + "&lng=" + latlng.lng();

              downloadUrl(url, function(data, responseCode) 
                if (responseCode == 200 && data.length >= 1) 
                  document.getElementById("message").innerHTML = "Location added. Contents: name=" + name +", address=" + address+ " latlng=" +latlng;
                
              );

              infowindow.setContent("You submitted Contents: name=" + name +", address=" + address+ " latlng=" +latlng);
            
          
        

        function downloadUrl(url, callback) 
          var request = window.ActiveXObject ?
            new ActiveXObject('Microsoft.XMLHTTP') :
            new XMLHttpRequest;

          request.onreadystatechange = function() 
            if (request.readyState == 4) 
              request.onreadystatechange = doNothing;
              callback(request.responseText, request.status);
            
          ; 

          request.open('GET', url, true);
          request.send(null);

          function doNothing() 

        

        google.maps.event.addDomListener(window, 'load', initialize);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false">
</script>

<div id="dvMap" style="width: 1000px; height: 490px"></div>
<div id="message"></div>