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

Save Button Not attached to the Right InfoWindow, Google Map

本文关键字:信息窗 信息 窗口 谷歌地图 按钮 保存      更新时间:2023-09-26

添加删除函数并将标记添加到数组后,保存按钮/保存函数不再附加到我的谷歌地图上的右侧信息窗口。

如果我打开两个信息窗口,在两个窗口中输入信息,然后在我打开的第一个窗口上单击保存,它将更新最后一个创建的信息窗口,并显示"您已提交",它将保存两次。我根据不同的堆栈溢出帖子尝试了一些不同的方法,包括在初始化信息窗口时添加迭代器,以及添加用于添加标记的外部函数,但都没有成功。我还确保在初始化之前声明了全局变量(如map)。我是一个挣扎了好几天的小妞。

我确信这个问题围绕着我对信息窗口如何连接到数组中的标记的困惑。我的代码在下面的代码段中。

        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>

好的,所以我移动了push语句,以便它在我声明信息窗口后将标记推送到数组。这阻止了保存函数多次保存html内容。所以保存现在工作得很好,唯一的问题是我是否能够更新正确的信息窗口,并显示消息"You submited…"它仍然只是在更新我打开的最后一个信息窗口。

        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>