个人中心
gpt4 book ai didi

javascript - 如何将 map Infowindow 值传递到 HTML 输入表单

转载 作者：行者123 更新时间：2023-12-03 00:24:26 24 4
gpt4 key购买 nike

好的，我快到了。下面的脚本获取 PHP SQL 查询的输出，并在结果中的每个点创建多个标记。

输出字符串 (liste_des_points) 如下所示:

[43.818298,-69.809998, "Phippsburg, Kennebec River, Maine"],[43.755001,-69.785004, "Fort Popham, Hunniwell Point, Kennebec River, Maine"]

最后一步(我无法完成)是，当用户单击标记时，它将通过在底部的三个 HTML 输入字段中显示信息窗口内容来确认选择；单击不同的标记，输入字段的内容会发生变化。

我发现我需要使用类似的东西:

document.getElementById('txtLat').value = liste_des_points[i][0];
document.getElementById('txtLng').value = liste_des_points[i][1];
document.getElementById('tideStation').value = (liste_des_points[i][2]);

但无法确定将其集成到现有脚本中的位置。

<html>

<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
    html {
        height: 100%
    }

    body {
        height: 100%;
        margin: 0;
        padding: 0
    }

    #map_canvas {
        height: 100%
    }
    </style>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY">
    </script>
    <script type="text/javascript">
    var infos = [];

    function initMap() {
        var optionsCarte = {
            center: new google.maps.LatLng(<?php echo $lat; ?>, <?php echo $lon; ?>),
            zoom: 12,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"), optionsCarte);
        var myicon = "images/tidesicons-line-32.ico";
        var liste_des_points = [<?php echo $listeDesPoints;?>];
        var liste_des_points_Station = [<?php echo $listeDesPointsStation;?>];
        var i = 0,
            li = liste_des_points.length;
        var infowindow = new google.maps.InfoWindow();
        currentPopup = infowindow;
        /* set the markers   */
        while (i < li) {
            new google.maps.LatLng(liste_des_points[i][0]);
            new google.maps.LatLng(liste_des_points[i][1]);
            new google.maps.LatLng(liste_des_points[i][2]);
            marker = new google.maps.Marker({
                position: new google.maps.LatLng(liste_des_points[i][0], liste_des_points[i][1]),
                map: map,
                icon: myicon,
            });
            var content = liste_des_points[i][0] + " ; " + liste_des_points[i][1] + " ; " + liste_des_points[i][2];

            i++;
            google.maps.event.addListener(marker, 'click', (function(marker, content, infowindow) {
                return function() {
                    /* close the previous info-window */
                    closeInfos();
                    infowindow.setContent(content);
                    infowindow.open(map, marker);
                    /* keep the handle, in order to close it on next click event */
                    infos[0] = infowindow;
                };
            })(marker, content, infowindow));
        }
    }

    function closeInfos() {
        if (infos.length > 0) {
            /* detach the info-window from the marker ... undocumented in the API docs */
            infos[0].set("marker", null);
            /* and close it */
            infos[0].close();
            /* blank the array */
            infos.length = 0;
        }
    }
    </script>
    <title>Search NOAA Stations by ZIPcode</title>
</head>
<div align="center">

    <body onLoad="initMap()">
        <div id="map_canvas" style="width:50%; height:50%"> </div>
</div>
<hr size=".5" width="75%" />
<div align="center">
    <div>
        <form action="output.php" method="get" name="locationinfo">
            <table cellpadding="3" cellspacing="3" align="center" width="40%">
                <tr>
                    <th colspan="2" align="center">You selected the tide station shown below.<br />If this not correct, click on another one in the map to change the selection</th>
                </tr>
                <tr>
                    <th colspan="2" align="center">When you click on the "Create Calendar Files..." link you will generate the files for the tide station you selected which will be used to create your calendar.</th>
                </tr>
                <tr>
                    <td colspan=3>
                        <div id="map_canvas" style="background-color: #ffffff"></div>
                    </td>
                </tr>
                <tr>
                    <td>Latitude:</td>
                    <td><input type="text" id="txtLat" name="txtLat" width="70" size="40"></td>
                <tr>
                    <td>Longitude:</td>
                    <td><input type="text" id="txtLng" name="txtLng" width="70" size="40"></td>
                </tr>
                <tr>
                    <td>Location:</td>
                    <td><input type="text" id="tideStation" name="txtDesc" width="100" size="40"></td>
                </tr>
                <tr>
                    <td align="center" colspan="2"><input type="submit" value="Create Calendar Files...">&nbsp;&nbsp;&nbsp;<INPUT type="reset" value="Clear Entry"></td>
                </tr>
            </table>
        </form>
    </div>
    </body>

</html>

最佳答案

修复现有代码的最简单方法是在标记“click”监听器函数中的 i 上添加函数闭包，并将设置表单中的值的代码放入其中:

google.maps.event.addListener(marker, 'click', (function(marker, content, infowindow, i) {
  return function() {
    /* close the previous info-window */
    closeInfos();
    infowindow.setContent(content);
    infowindow.open(map, marker);
    document.getElementById('txtLat').value = liste_des_points[i][0];
    document.getElementById('txtLng').value = liste_des_points[i][1];
    document.getElementById('tideStation').value = (liste_des_points[i][2]);
    /* keep the handle, in order to close it on next click event */
    infos[0] = infowindow;
  };
})(marker, content, infowindow, i));
i++;

proof of concept fiddle

screenshot of resulting map

代码片段:

html {
  height: 100%
}

body {
  height: 100%;
  margin: 0;
  padding: 0
}

#map_canvas {
  height: 50%
}
<script>
  var infos = [];

  function initMap() {
    var optionsCarte = {
      center: new google.maps.LatLng(43.818298, -69.809998),
      zoom: 12,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), optionsCarte);
    var liste_des_points = [
      [43.818298, -69.809998, "Phippsburg, Kennebec River, Maine"],
      [43.755001, -69.785004, "Fort Popham, Hunniwell Point, Kennebec River, Maine"]
    ];
    //var liste_des_points_Station=[<?php echo $listeDesPointsStation;?>];
    var i = 0,
      li = liste_des_points.length;
    var infowindow = new google.maps.InfoWindow();
    currentPopup = infowindow;
    /* set the markers   */
    while (i < li) {
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(liste_des_points[i][0], liste_des_points[i][1]),
        map: map,
      });
      var content = liste_des_points[i][0] + " ; " + liste_des_points[i][1] + " ; " + liste_des_points[i][2];

      google.maps.event.addListener(marker, 'click', (function(marker, content, infowindow, i) {
        return function() {
          /* close the previous info-window */
          closeInfos();
          infowindow.setContent(content);
          infowindow.open(map, marker);
          document.getElementById('txtLat').value = liste_des_points[i][0];
          document.getElementById('txtLng').value = liste_des_points[i][1];
          document.getElementById('tideStation').value = (liste_des_points[i][2]);
          /* keep the handle, in order to close it on next click event */
          infos[0] = infowindow;
        };
      })(marker, content, infowindow, i));
      i++;
    }
  }

  function closeInfos() {
    if (infos.length > 0) {
      /* detach the info-window from the marker ... undocumented in the API docs */
      infos[0].set("marker", null);
      /* and close it */
      infos[0].close();
      /* blank the array */
      infos.length = 0;
    }
  }
</script>
<div id="map_canvas"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"></script>
<div align="center">
  <div id="map_canvas" style="width:50%; height:50%"> </div>
</div>
<hr size=".5" width="75%" />
<div align="center">

  <div>
    <form action="output.php" method="get" name="locationinfo">
      <table cellpadding="3" cellspacing="3" align="center" width="40%">
        <tr>
          <th colspan="2" align="center">You selected the tide station shown below.<br />If this not correct, click on another one in the map to change the selection</th>
        </tr>
        <tr>
          <th colspan="2" align="center">When you click on the "Create Calendar Files..." link you will generate the files for the tide station you selected which will be used to create your calendar.</th>
        </tr>
        <tr>
          <td colspan=3>
            <div id="map_canvas" style="background-color: #ffffff"></div>
          </td>
        </tr>
        <tr>
          <td>Latitude:</td>
          <td><input type="text" id="txtLat" name="txtLat" width="70" size="40"></td>
          <tr>
            <td>Longitude:</td>
            <td><input type="text" id="txtLng" name="txtLng" width="70" size="40"></td>
          </tr>
          <tr>
            <td>Location:</td>
            <td><input type="text" id="tideStation" name="txtDesc" width="100" size="40"></td>
          </tr>
          <tr>
            <td align="center" colspan="2"><input type="submit" value="Create Calendar Files...">&nbsp;&nbsp;&nbsp;
              <INPUT type="reset" value="Clear Entry">
            </td>
          </tr>
      </table>
    </form>
  </div>

关于javascript - 如何将 map Infowindow 值传递到 HTML 输入表单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54154147/

24 4 0
文章推荐： javascript - EJS语法错误: unexpected token ; while compiling ejs
文章推荐： amazon-web-services - DynamoDB 的条件更新如何与其最终一致性模型配合使用？
文章推荐： amazon-web-services - 加密AWS RDS实例有什么好处
文章推荐： javascript - req.isAuthenticated() 重定向时发生变化？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com