各配列要素に複数の機能がある場合、どのように配列に追加するのですか？配列リストの各要素が複数の部品を持っている場合はHTMLで

、どのように私は、配列に項目を追加するには？各配列要素に複数の機能がある場合、どのように配列に追加するのですか？配列リストの各要素が複数の部品を持っている場合は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>

これは問題ありませんか？

出典

2017-12-01 DaCodeMonkey01

あなたは「機能」オブジェクトへのあなたの座標要素から取得する方法を見つけ出す必要があります。要素からテキストを取得できますが、数値を解析してLatLngを構築する必要があります。 –

あなたの機能オブジェクトを見れば、あなたは、基本的には、1つを構築するために3つの事を必要とする：

緯度
経度
タイプ

最も簡単な方法は、したがって、持っていることであろうあなたのフォームに3つの入力。入力が1つだけの場合は、テキストを解析して、緯度と緯度と経度とはどのような部分かを把握する必要があります。それでは、このようなあなたのフォームを試してみましょう：

（EDITを：。私は、「これ」と見なされていない標準にアクセスすることはできませんアクションを使用して、より標準のonSubmit動作を使用するために、これを変更しました）。

<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>

もちろん、1つのフィールドの解析を自由に行うことはできますが、質問から私はあなたにとって挑戦になると思います。

これをJavaScriptで処理するには（HTMLに配列がない、javascriptでは）、すべての要素にアクセスできるフォームオブジェクトが渡されるようになりました。

各要素の値を取得するには、次のようなものだろう：「フォーム」はフォームの名前である

form.elements["elementname"].value

を。だから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);

出典

2017-12-01 20:10:41

新しいフィーチャオブジェクトを作成した場合、古いフィーチャオブジェクトが置き換えられますか？ – DaCodeMonkey01

各配列要素に複数の機能がある場合、どのように配列に追加するのですか？配列リストの各要素が複数の部品を持っている場合はHTMLで

答えて

関連する問題