javascript - 如何将 Google Maps InfoWindow 数据放入多个 HTML 文本框中

Question

我正在开发一个应用程序，您可以在其中单击 Google map 标记图钉，它会自动将信息窗口内容填充到文本框中。但是，我似乎无法进行信息传输。我已经进行了广泛的搜索，试图解决这个问题，但到目前为止还没有成功 - 特别是因为涉及多个文本框。如果有任何帮助，我将不胜感激。

这是 HTML 代码:

    <!-- Map -->
    <div id="mapDiv"></div><br />

    <!-- Destinations -->
    <div id="destination1">
        <label class="title">Destination 1:</label>
        <input id="dest-num1" type="text" name="dest1" size="50" />
    </div><br />

    <div id="destination2"> 
        <label class="title">Destination 2:</label>
        <input id="dest-num2" type="text" name="dest2" size="50" />
    </div><br />

这是我的 JavaScript:

    var map;
    function initMap(){
            google.maps.visualRefresh = true;

            var mapOptions = {
                center: new google.maps.LatLng(37.09948, -95.59307),
                zoom: 4,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            var mapElement = document.getElementById('mapDiv');

            map = new google.maps.Map(mapElement, mapOptions);

            var markers = [
                ['BHM-Birmingham', 33.56243, -86.75413],
                ['HSV-Huntsville', 34.64033, -86.77569],
                ['PHX-Phoenix', 33.43727, -112.00779],
                ['TUS-Tucson', 32.11451, -110.93923]
            ];

            var infoWindowContent = [
                ['<div class="info_content">' + '<p>Birmingham, AL (BHM - Birmingham-Shuttlesworth Intl)</p>' + '</div>'],
                ['<div class="info_content">' + '<p>Huntsville, AL (HSV - Huntsville Intl)</p>' + '</div>'],
                ['<div class="info_content">' + '<p>Phoenix, AZ (PHX - Phoenix Sky Harbor Intl)</p>' + '</div>'],
                ['<div class="info_content">' + '<p>Tucson, AZ (TUS - Tucson Intl)</p>' + '</div>'],
            ];

            var infoWindow = new google.maps.InfoWindow(), marker, i;

            for(i=0; i < markers.length; i++){
                var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
                var image = 'images/airportIcon_red.png';
                var marker = new google.maps.Marker({
                    position: position,
                    map: map,
                    icon: image,
                    title: markers[i][0],
                    draggable: false,
                });

                google.maps.event.addListener(marker, 'click', (function(marker, i) {
                    return function() {
                        infoWindow.setContent(infoWindowContent[i][0]);
                        infoWindow.open(map, marker);
                        if (!"dest-num1".val()) {
                            document.getElementById("dest-num1").value = infoWindowContent;
                            if (!"dest-num2".val()) {
                                document.getElementById("dest-num2").value = infoWindowContent;
                                if (!"dest-num1".val() && !"dest-num2".val()) {
                                    alert ("One of the destination fields must be cleared before a new destination can be selected");
                                }
                            } 
                        }
                    }
                })(marker, i));
            }   
        }
    google.maps.event.addDomListener(window, 'load', initMap);

预先感谢您的帮助!

Answer 1

您错误地使用了 JQuery:

if (!"dest-num1".val()) {
  document.getElementById("dest-num1").value = infoWindowContent;
  if (!"dest-num2".val()) {
    document.getElementById("dest-num2").value = infoWindowContent;
      if (!"dest-num1".val() && !"dest-num2".val()) {
        alert ("One of the destination fields must be cleared before a new destination can be selected");
      }
    } 
 }

应该是(注意 $(#...),val() 与 "dest-num1".val()):

if (!$("#dest-num1").val()) {
  document.getElementById("dest-num1").value = markers[i][0];
} else if (!$("#dest-num2").val()) {
  document.getElementById("dest-num2").value = markers[i][0];
} else {
  alert("One of the destination fields must be cleared before a new destination can be selected");
} 

working fiddle

var map;

function initMap() {
  google.maps.visualRefresh = true;

  var mapOptions = {
    center: new google.maps.LatLng(37.09948, -95.59307),
    zoom: 4,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var mapElement = document.getElementById('mapDiv');

  map = new google.maps.Map(mapElement, mapOptions);

  var markers = [
    ['BHM-Birmingham', 33.56243, -86.75413],
    ['HSV-Huntsville', 34.64033, -86.77569],
    ['PHX-Phoenix', 33.43727, -112.00779],
    ['TUS-Tucson', 32.11451, -110.93923]
  ];

  var infoWindowContent = [
    ['<div class="info_content">' + '<p>Birmingham, AL (BHM - Birmingham-Shuttlesworth Intl)</p>' + '</div>'],
    ['<div class="info_content">' + '<p>Huntsville, AL (HSV - Huntsville Intl)</p>' + '</div>'],
    ['<div class="info_content">' + '<p>Phoenix, AZ (PHX - Phoenix Sky Harbor Intl)</p>' + '</div>'],
    ['<div class="info_content">' + '<p>Tucson, AZ (TUS - Tucson Intl)</p>' + '</div>'],
  ];

  var infoWindow = new google.maps.InfoWindow(),
    marker, i;

  for (i = 0; i < markers.length; i++) {
    var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
    // var image = 'images/airportIcon_red.png';
    var marker = new google.maps.Marker({
      position: position,
      map: map,
      // icon: image,
      title: markers[i][0],
      draggable: false,
    });

    google.maps.event.addListener(marker, 'click', (function(marker, i) {
      return function() {
        infoWindow.setContent(infoWindowContent[i][0]);
        infoWindow.open(map, marker);
        var value = $("#dest-num1").val();
        if (!$("#dest-num1").val()) {
          document.getElementById("dest-num1").value = markers[i][0];
        } else if (!$("#dest-num2").val()) {
          document.getElementById("dest-num2").value = markers[i][0];
        } else {
          alert("One of the destination fields must be cleared before a new destination can be selected");
        }
      }

    })(marker, i));
  }
}
google.maps.event.addDomListener(window, 'load', initMap);

html,
body,
#mapDiv {
  height: 500px;
  width: 500px;
  margin: 0px;
  padding: 0px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<!-- Map -->
<div id="mapDiv"></div>
<br />
<!-- Destinations -->
<div id="destination1">
  <label class="title">Destination 1:</label>
  <input id="dest-num1" type="text" name="dest1" size="50" />
</div>
<br />
<div id="destination2">
  <label class="title">Destination 2:</label>
  <input id="dest-num2" type="text" name="dest2" size="50" />
</div>
<br />