0

Web アプリケーションに、ユーザーがポリゴンの頂点を入力できるテキスト領域があります。クリックすると、頂点が入力されたポリゴンがGoogleマップに描画されるボタンを実装したいと考えています。頂点は常に次の形式になります。

25.82024674666931, 55.66104912743973,
25.54465656761206, 48.11048789757425,
25.22561664287819, 5.57756899014949,
25.47485219998054, 26.21461743851616

それを行う最善の方法は何ですか。

あなたの助けは大歓迎です

4

1 に答える 1

1

入力が常にクリーンであると信頼している場合、複雑な手順はありません。

まず、カンマ区切りのテキストを LatLng の配列に変換します。

  function textToLatLngs(text) {
    var dots = text.value.split(",");
    var latLngs = [];
    for(var i = 0; i < dots.length; i += 2) {
      latLngs[i/2] = new google.maps.LatLng(parseFloat(dots[i]),
                       parseFloat(dots[i+1]));
    }
    return latLngs;
  }

次に、LatLngs を使用してポリゴンを定義できます。

  function drawPolygon(vertices) {
    var polygon = new google.maps.Polygon({
      strokeColor: "#f33",
      fillColor: "#fce",
      paths: vertices,
      map: map
    });
  }

最後に、HTML と Javascript をイベント リスナーにリンクします (私は に入れましたinitialize()) 。

  function initialize() {
    var mapOptions = {
      center: new google.maps.LatLng(25.0, 25.0),
      zoom: 5,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

    google.maps.event.addDomListener(
      document.getElementById("button1"), 
      'click',
      function() {
        drawPolygon(textToLatLngs(document.getElementById('coordsinput')));
      });
  }

次のような HTML フォームを使用します。

      <form id="form">
        <input id="button1" type="button" value="get polygon">
        <br /><br />
        <textarea id="coordsinput" cols="22" rows="20">
        25.82024674666931, 55.66104912743973,
        25.54465656761206, 48.11048789757425,
        25.22561664287819, 5.57756899014949,
        25.47485219998054, 26.21461743851616
    </textarea>
      </form>

ボタンをクリックするたびに、ボタンは新しいポリゴンを描画します。単一のポリゴンを移動するだけの場合は、ボタンがクリックされたときに setPaths を呼び出す必要があります。

http://jsbin.com/enepis/edit#preview

于 2012-05-22T15:06:35.703 に答える