javascript - 将监听器添加到多个标记(Google map API)以在单击时填充表单的输入字段

Question

我从 (mongodb) 数据库中检索了一些数据(文档集)，每个文档都有(除其他数据外)经度和纬度。所以我使用经度和纬度在 map 上显示标记。那很好用。

现在我想将监听器添加到每个标记，当点击它时，它会用值填充表单的输入字段。我编写了 JavaScript 代码来实现这一点，但我在表单字段中显示的是“undefined”，而不是预期值。当我警告(使用 alert() )脚本中从数据库中获取的值时，它们是正确的，但由于某些我忽略的原因，我无法在字段中显示。

如果有人能提供帮助，我将不胜感激。

提前致谢!

这是脚本:

<script type="text/javascript">
    var lat = [];
    var lng = [];
    var status = [];
    var ipAddress = [];
    var height = [];
    var currentPower = [];
    var targetPower = [];
    var connectivity = [];
    var height = [];
    var emergencyMessage = [];
    var nominalMessage = [];
    //var iLiteID = [];
    var transmission = [];

    var latitude_tmp = 0;
    var longitude_tmp = 0;

    <c:forEach items="${iLiteList}" var="ilites" varStatus="status"> 
        latitude_tmp = (parseFloat("${ilites.latitude}"));
        longitude_tmp = (parseFloat("${ilites.longitude}"));
        lat.push((latitude_tmp));
        lng.push((longitude_tmp));
        status.push("${ilites.status}");
        ipAddress.push("${ilites.ipAddress}");
        height.push(parseFloat("${ilites.height}"));
        currentPower.push(parseFloat("${ilites.currentPower}"));
        targetPower.push(parseFloat("${ilites.targetPower}"));
        connectivity.push("${ilites.connectivity}");
        emergencyMessage.push("${ilites.emergencyMessage}");
        nominalMessage.push("${ilites.nominalMessage}");
        transmission.push("${ilites.transmission}");
    </c:forEach> 

    // Map creation 
         var myCenter=new google.maps.LatLng(48.2188,11.6248); 

        var map1 ;
        function initialize()
        {
             var mapProp = {
             center:myCenter,
             zoom:18,
            mapTypeId:google.maps.MapTypeId.ROADMAP
            };

            map1=new google.maps.Map(document.getElementById("googleMap1"),mapProp); 

            var marker = [] ;
            var latLng = []; 

            for(i = 0; i<lat.length; i ++){
                latLng [i] = new google.maps.LatLng(lat[i],lng[i]);
            }

            for (i = 0; i<lat.length; i ++){

                marker[i]=new google.maps.Marker({
                      position:latLng [i],
                      map: map1,
                      });
                marker[i].setMap(map1);

                google.maps.event.addListener(marker[i], 'click', function() {

                          document.getElementById("latitude").value=lat[i];
                          document.getElementById("status").value =status[i];
                          document.getElementById("ipAddress").value =ipAddress[i];
                          document.getElementById("longitude").value =lng[i];
                          document.getElementById("currentPower").value =currentPower[i];
                          document.getElementById("targetPower").value =targetPower[i];
                          document.getElementById("connectivity").value =connectivity[i];
                          document.getElementById("height").value =height[i];
                          document.getElementById("emergencyMessage").value =emergencyMessage[i];
                          document.getElementById("nominalMessage").value =nominalMessage[i];

                          if((transmission[i]).localeCompare("ON") == 0){
                              document.getElementById("transmission1").checked =true;
                          }else{
                              document.getElementById("transmission2").checked =true;
                          }

                        });
            }
        }

        google.maps.event.addDomListener(window, 'load', initialize);   
</script>

这是表格:

<form class="form-inline" id="configurationUpdate" name="configurationUpdate">
    <div class="row" class=" display-panel" style="margin-right: 1px;">

        <div class="col-md-4 ">
            <div class="row inline_form">
                <label for="iliteID" class="col-sm-6  col-xs-12">I-Lite ID:</label>
                <input class="col-sm-6  col-xs-12" id="iLiteID" name="iLiteID">
            </div>
            <div class="row inline_form">
                <label for="latitude" class="col-sm-6  col-xs-12">Latitude (degree):</label>
                <input class="col-sm-6  col-xs-12" id="latitude" name="latitude">
            </div>
            <div class="row inline_form">
                <label for="target" class="col-sm-6  col-xs-12">Target Power (dBm):</label> 
                <input class="col-sm-6  col-xs-12" id="targetPower" name="targetPower">
            </div>
            <div class="row inline_form">
                <label for="status" class="col-sm-6  col-xs-12">Status:</label>
                <input class="col-sm-6  col-xs-12" id="status" name="status">
            </div>
            <div class="row inline_form">
                <label for="nominalMessage" class="col-sm-6  col-xs-12">Nominal Message:</label>
                <input class="col-sm-6  col-xs-12" name="nominalMessage" id="nominalMessage" placeholder="Enter message here">
            </div>
        </div>
        <div class="col-md-4">
            <div class="row inline_form">
                <label for="ipAddres" class="col-sm-6  col-xs-12">IP address:</label>
                <input class="col-sm-6  col-xs-12" id="ipAddress" name="ipAddress">
            </div>
            <div class="row inline_form">
                <label for="longitude" class="col-sm-6  col-xs-12">Longitude(degree):</label>
                <input class="col-sm-6  col-xs-12" id="longitude" name="longitude">
            </div>
            <div class="row inline_form">
                <label for="currentPower" class="col-sm-6  col-xs-12">Current Power(dBm):</label>
                <input class="col-sm-6  col-xs-12" id="currentPower" name="currentPower">
            </div>
            <div class="row inline_form">
                <label class="col-sm-6  col-xs-12" for="transmission">Transmission:</label>
                <label class="radio-inline col-sm-3  col-xs-6"><input type="radio" id="transmission1" name="transmission"  value = "ON"checked>ON</label>
                <label class="radio-inline col-sm-offset-9  col-xs-offset-6"><input type="radio" id="transmission2" name="transmission" value = "OFF">OFF</label>   
            </div>
            <div class="row inline_form">
                <label for="emergencyMessage" class="col-sm-6  col-xs-12">Emergency Message:</label>
                <input class="col-sm-6  col-xs-12" name="emergencyMessage"id="emergencyMessage" placeholder="Enter message here">
            </div>
        </div>
        <div class="col-md-4 inline_form">
            <div class="row">
                <label for="connectivity" class="col-sm-6  col-xs-12"> Connectivity:</label>
                <input class="col-sm-6  col-xs-12" id="connectivity" name="connectivity" >
            </div>
            <div class="row inline_form">
                <label for="height" class="col-sm-6  col-xs-12">Height (m) :</label>
                <input class="col-sm-6  col-xs-12" id="height" name="height" type="number" >
            </div>
        </div>
    </div>

    <div class="row">

        <div class="btn-group pull-right">

            <button class="col-md-offset-10 btn  btn-default updateConfBtn" id="updateConfBtn"><b>Update Configuration</b> </button>                                
        </div>

    </div>
</form>

Error_Message

Answer 1

当循环完成时，i 留在 marker.length(超过数组的末尾)。可选的是在 i 变量上使用函数闭包，如类似问题 Google Maps JS API v3 - Simple Multiple Marker Example 中所示:

google.maps.event.addListener(marker[i], 'click', (function(i) {
return function() {

  document.getElementById("latitude").value = lat[i];
  document.getElementById("status").value = status[i];
  document.getElementById("ipAddress").value = ipAddress[i];
  document.getElementById("longitude").value = lng[i];
  document.getElementById("currentPower").value = currentPower[i];
  document.getElementById("targetPower").value = targetPower[i];
  document.getElementById("connectivity").value = connectivity[i];
  document.getElementById("height").value = height[i];
  document.getElementById("emergencyMessage").value = emergencyMessage[i];
  document.getElementById("nominalMessage").value = nominalMessage[i];

  if ((transmission[i]).localeCompare("ON") == 0) {
    document.getElementById("transmission1").checked = true;
  } else {
    document.getElementById("transmission2").checked = true;
  }
}}(i)));

proof of concept fiddle

代码片段:

// Map creation 
var myCenter = new google.maps.LatLng(48.2188, 11.6248);

var map1;

function initialize() {

  var lat = [];
  var lng = [];
  var status = [];
  var ipAddress = [];
  var height = [];
  var currentPower = [];
  var targetPower = [];
  var connectivity = [];
  var height = [];
  var emergencyMessage = [];
  var nominalMessage = [];
  //var iLiteID = [];
  var transmission = [];

  var latitude_tmp = 0;
  var longitude_tmp = 0;

  latitude_tmp = 48.219297;
  longitude_tmp = 11.623927;
  lat.push((latitude_tmp));
  lng.push((longitude_tmp));
  status.push("stat");
  ipAddress.push("192.168.0.1");
  height.push(parseFloat("3.14"));
  currentPower.push(parseFloat("10"));
  targetPower.push(parseFloat("12"));
  connectivity.push("conn");
  emergencyMessage.push("emergencyMessage");
  nominalMessage.push("nominalMessage");
  transmission.push("transmission");

  latitude_tmp = 48.219472;
  longitude_tmp = 11.625102;
  lat.push((latitude_tmp));
  lng.push((longitude_tmp));
  status.push("stat");
  ipAddress.push("192.168.0.1");
  height.push(parseFloat("3.14"));
  currentPower.push(parseFloat("10"));
  targetPower.push(parseFloat("12"));
  connectivity.push("conn");
  emergencyMessage.push("emergencyMessage");
  nominalMessage.push("nominalMessage");
  transmission.push("transmission");

  var mapProp = {
    center: myCenter,
    zoom: 18,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  map1 = new google.maps.Map(document.getElementById("googleMap1"), mapProp);
  google.maps.event.addListener(map1, 'click', function(evt) {
    document.getElementById('info').innerHTML += evt.latLng.toUrlValue(6) + "<br>";
  });
  var marker = [];
  var latLng = [];

  for (i = 0; i < lat.length; i++) {
    latLng[i] = new google.maps.LatLng(lat[i], lng[i]);
  }

  for (i = 0; i < lat.length; i++) {

    marker[i] = new google.maps.Marker({
      position: latLng[i],
      map: map1,
    });
    marker[i].setMap(map1);

    google.maps.event.addListener(marker[i], 'click', (function(i) {
      return function() {

        document.getElementById("latitude").value = lat[i];
        document.getElementById("status").value = status[i];
        document.getElementById("ipAddress").value = ipAddress[i];
        document.getElementById("longitude").value = lng[i];
        document.getElementById("currentPower").value = currentPower[i];
        document.getElementById("targetPower").value = targetPower[i];
        document.getElementById("connectivity").value = connectivity[i];
        document.getElementById("height").value = height[i];
        document.getElementById("emergencyMessage").value = emergencyMessage[i];
        document.getElementById("nominalMessage").value = nominalMessage[i];

        if ((transmission[i]).localeCompare("ON") == 0) {
          document.getElementById("transmission1").checked = true;
        } else {
          document.getElementById("transmission2").checked = true;
        }
      }
    }(i)));
  }
}

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

html,
body,
#googleMap1 {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<form class="form-inline" id="configurationUpdate" name="configurationUpdate">
  <div class="row" class=" display-panel" style="margin-right: 1px;">

    <div class="col-md-4 ">
      <div class="row inline_form">
        <label for="iliteID" class="col-sm-6  col-xs-12">I-Lite ID:</label>
        <input class="col-sm-6  col-xs-12" id="iLiteID" name="iLiteID">
      </div>
      <div class="row inline_form">
        <label for="latitude" class="col-sm-6  col-xs-12">Latitude (degree):</label>
        <input class="col-sm-6  col-xs-12" id="latitude" name="latitude">
      </div>
      <div class="row inline_form">
        <label for="target" class="col-sm-6  col-xs-12">Target Power (dBm):</label>
        <input class="col-sm-6  col-xs-12" id="targetPower" name="targetPower">
      </div>
      <div class="row inline_form">
        <label for="status" class="col-sm-6  col-xs-12">Status:</label>
        <input class="col-sm-6  col-xs-12" id="status" name="status">
      </div>
      <div class="row inline_form">
        <label for="nominalMessage" class="col-sm-6  col-xs-12">Nominal Message:</label>
        <input class="col-sm-6  col-xs-12" name="nominalMessage" id="nominalMessage" placeholder="Enter message here">
      </div>
    </div>
    <div class="col-md-4">
      <div class="row inline_form">
        <label for="ipAddres" class="col-sm-6  col-xs-12">IP address:</label>
        <input class="col-sm-6  col-xs-12" id="ipAddress" name="ipAddress">
      </div>
      <div class="row inline_form">
        <label for="longitude" class="col-sm-6  col-xs-12">Longitude(degree):</label>
        <input class="col-sm-6  col-xs-12" id="longitude" name="longitude">
      </div>
      <div class="row inline_form">
        <label for="currentPower" class="col-sm-6  col-xs-12">Current Power(dBm):</label>
        <input class="col-sm-6  col-xs-12" id="currentPower" name="currentPower">
      </div>
      <div class="row inline_form">
        <label class="col-sm-6  col-xs-12" for="transmission">Transmission:</label>
        <label class="radio-inline col-sm-3  col-xs-6">
          <input type="radio" id="transmission1" name="transmission" value="ON" checked>ON</label>
        <label class="radio-inline col-sm-offset-9  col-xs-offset-6">
          <input type="radio" id="transmission2" name="transmission" value="OFF">OFF</label>
      </div>
      <div class="row inline_form">
        <label for="emergencyMessage" class="col-sm-6  col-xs-12">Emergency Message:</label>
        <input class="col-sm-6  col-xs-12" name="emergencyMessage" id="emergencyMessage" placeholder="Enter message here">
      </div>
    </div>
    <div class="col-md-4 inline_form">
      <div class="row">
        <label for="connectivity" class="col-sm-6  col-xs-12">Connectivity:</label>
        <input class="col-sm-6  col-xs-12" id="connectivity" name="connectivity">
      </div>
      <div class="row inline_form">
        <label for="height" class="col-sm-6  col-xs-12">Height (m) :</label>
        <input class="col-sm-6  col-xs-12" id="height" name="height" type="number">
      </div>
    </div>
  </div>

  <div class="row">

    <div class="btn-group pull-right">

      <button class="col-md-offset-10 btn  btn-default updateConfBtn" id="updateConfBtn"><b>Update Configuration</b> 
      </button>
    </div>

  </div>
</form>
<div id="info"></div>
<div id="googleMap1"></div>