將用戶在標記/圖釘上輸入的輸入保存到InfoWindow中

Question

我正在嘗試實現一個程序，在該程序中，用戶在信息窗口中輸入描述，當您單擊標記/圖釘時會彈出該描述（先前由用戶在單擊時插入）。 現在代碼工作正常，文本字段出現在信息窗口上，並以文本作為輸入，但是問題是當我關閉該文本字段並再次單擊相同的標記時，它會松散上一次輸入的內容。 以下是我在該論壇的專家幫助下編寫的代碼。 PS：我正在嘗試學習JavaScript，這是我的新手，所以如果這個問題不在意，我深表歉意。

<!DOCTYPE html>
<html>
  <head>
    <title>Accessing arguments in UI events</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
function initialize() {
  var mapOptions = {
    zoom: 4,
    center: new google.maps.LatLng(65.0126304,25.4703071)
  };
  var map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

  google.maps.event.addListener(map, 'click', function(e) {
    placeMarker(e.latLng, map);
  });
}

function placeMarker(position, map) {
  var marker = new google.maps.Marker({
    position: position,
    map: map
  });
var infowindow = new google.maps.InfoWindow({
   content : "<input type='text'>"
});

  map.panTo(position);
google.maps.event.addListener( marker, "click", function() {
   infowindow.open( map, marker );
});
}

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

    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>

Answer 1

方法如下：

定義一個全局計數器，該計數器在添加每個標記后會增加，
將計數器的當前值提供給infowindow，以便我們可以使用它為輸入提供ID，並確保它們是唯一的，
將事件closeclick添加到信息窗口，當信息窗口關閉時，該事件將使用填充的信息更新輸入內容。
這些之后的增量index 。

解

1-位置index = 0; 在function initialize() {之前function initialize() {

2-更新您的信息窗口創建者：

var infowindow = new google.maps.InfoWindow({
    content : "<input id='myText" + index + "' type='text'>",
    id : index
});

3-在標記單擊事件之后添加另一個事件：

google.maps.event.addListener( infowindow, "closeclick", function(e) {
    infowindow.setContent("<input id='myText" + infowindow.id + "' type='text' value='" + document.getElementById("myText" + infowindow.id).value + "'>");
});

4-添加index++; 在closeclick事件之后。

這可能不是最佳做法，但應該可以。

將用戶在標記/圖釘上輸入的輸入保存到InfoWindow中

問題描述

1 個解決方案

解決方案1
0 已采納 2014-03-03 11:43:56

將用戶在標記/圖釘上輸入的輸入保存到InfoWindow中

問題描述

1 個解決方案

解決方案1 0 已采納 2014-03-03 11:43:56

解決方案1
0 已采納 2014-03-03 11:43:56