Question

在HTML中，如果数组列表中的每个元素都有多个部分，如何将项添加到数组中？

我正在为Google地图创建自定义地图，我正在使用表单在数组中输入新坐标。该数组是一个坐标位置列表，其图标与之关联。我在主体中有一个表单，它使用一个提交按钮来调用我放在标题中的addLocation函数，它还更新了坐标数组和地图。到目前为止，这个代码是正确的，就数组操作而言如何？任何想法或提示？这是我的基本看起来，坐标只是例子。

<html>
<head>
    <title>Custom Markers</title>
    <script>
        var features = 
            [
              {
                position: new google.maps.LatLng(-33.91721, 151.22630),
                type: 'starter'
              },
              {
                position: new google.maps.LatLng(-33.91539, 151.22820),
                type: 'unown'
              }
            ];
        function addLocation(coordinates)
        {
            features.push(***this is the part I'm not sure about***);
        }
    </script>

  </head>
  <body>
    <div id="newlocation">
        <p> Add a new location:</br>
            <form action=addLocation(coordinates)>
                Coordinates:  <input type="text" name="coordinates">  <input type="submit">
            </form> 
        </br>
        </br>
        </p>

    </div>
    <div id="map"></div>
    <script>
      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          zoom: 16,
          center: new google.maps.LatLng(-33.91722, 151.23064),
          mapTypeId: 'roadmap'
        });

        var iconBase = 'C:\Users\JM\Desktop\UnownMap\Icons\';
        var icons = {
          starter: {
            icon: iconBase + 'starting.png'
          },
          unown: {
            icon: iconBase + 'unownLoc.png'
          }
        };

        // Create markers.
        features.forEach(function(feature) {
          var marker = new google.maps.Marker({
            position: feature.position,
            icon: icons[feature.type].icon,
            map: map
          });
        });
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=___________&callback=initMap">
    </script>
  </body>
</html>

这可以吗？

Answer 1

如果你看一下你的特征对象，你基本上需要做三件事来构建一个：

纬度
经度
型

因此，最简单的方法是在表单中输入3个输入。如果你只有一个输入，你需要解析文本并找出哪个部分是纬度，哪个部分是经度等等。为什么要经历这个麻烦？所以，让我们尝试这样的形式：

（编辑：我已将此更改为使用更多标准的onsubmit行为。使用操作无法访问＆＃34;此＆＃34;并且不被视为标准。）

   <form onsubmit="addLocation(this); return false">
        Latitude:  <input type="text" name="latitude">  <br>
        Longitude:  <input type="text" name="longitude"><br>  
        Type:  <input type="text" name="featuretype">  <br>
        <input type="submit">
   </form>

当然，你可以自由地尝试解析一个字段，但是根据你的问题，我认为这对你来说是个挑战。

要在你的javascript中处理它（让我们清楚，HTML没有数组，javascript确实如此），你现在正在传递一个表单对象，你可以从中访问所有元素。

要获取每个元素的值，您可以执行以下操作：

form.elements["elementname"].value

其中＆＃34;形式＆＃34;是表单的名称。所以你的javascript函数开始了：

function addLocation(myform)
{
    var lat = myform.elements["latitude"].value;
    var lng = myform.elements["longitude"].value;
    var featuretype = myform.elements["featuretype"].value;
    ...

此步骤可能是不必要的，具体取决于google api是否自动为您执行此操作，但您可以将字符串转换为这样的浮点数：

   lat = parseFloat(lat);
   lng = parseFloat(lng);

获得这3个值后，您可以创建一个新的要素对象，就像数组中的原始对象一样：

    var feature = {
          position: new google.maps.LatLng(lat,lng),
          type: featuretype
    };

并将其添加到数组

    features.push(feature);

如果每个数组元素都有多个功能，我如何添加到数组？

1 个答案: