web-dev-qa-db-ja.com

Google Maps API v3-動的なポリゴン/ポリラインを描画する方法は？

Google Maps Javascript APIで4日間の経験がありますが、それらのドキュメントと情報共有はせいぜい混乱しているだけです。

this の例と同様に、Googleマップに（Javascript API V3を使用して）ポリゴン/ポリラインを描画する方法に関する経験や知識はありますか？ （ this 2008年のblogPostで見つけました）

私の研究からわかるように、この例ではJavascript API V2を直接使用するか、V2のGeometryControlユーティリティライブラリを使用します（参照用に here を検索できます）。 Javascript API V3にそのようなインターフェースを許可する方法があるかどうかはわかりません。

私は研究を続けますが、有益なコメントやリンク、提案をいただければ幸いです。たとえさらなる研究のために正しい方向に私を指摘しても。 :)

drawinggoogle-maps-api-3polygons
24
David 'the bald ginger'

多くの研究の後、私は this の例に出会いました。それを発見してグーグルで調べた後、それは私のような質問に対する一般的な答えのようです。これは非常に基本的なものですが、V3 APIによれば正しいです。

この例のコードを使用して、必要なプロトタイプを正常に作成しています。コードは基本ですが、仕様に合わせて拡張できることがわかりました。これは良いことです。

プレクサーの回答への私のコメントで提供されたリンクが最善の解決策になりますが、それを開発している人は、まだ開発中であり、リリースアプリケーションで使用するには十分に安定していないと述べています。

22
David 'the bald ginger'

Google Maps v3.7では、 Drawing Library を使用できます

別の優れたライブラリ： polygonEdit/polylineEdit by [email protected]

12
helmi03

曲線のスクリプトを見てください： http://curved_lines.overfx.net/

私が使用する関数は次のとおりです。

function curved_line_generate(LatStart, LngStart, LatEnd, LngEnd, Color, Horizontal, Multiplier) {

  var LastLat = LatStart;
  var LastLng = LngStart;

  var PartLat;
  var PartLng;

  var Points = new Array(0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9);
  var PointsOffset = new Array(0.2, 0.35, 0.5, 0.55, 0.60, 0.55, 0.5, 0.35, 0.2);

  var OffsetMultiplier = 0;

  if (Horizontal == 1) {
    var OffsetLenght = (LngEnd - LngStart) * 0.1;
  } else {
    var OffsetLenght = (LatEnd - LatStart) * 0.1;
  }

  for (var i = 0; i < Points.length; i++) {
    if (i == 4) {
      OffsetMultiplier = 1.5 * Multiplier;
    }

    if (i >= 5) {
      OffsetMultiplier = (OffsetLenght * PointsOffset[i]) * Multiplier;
    } else {
      OffsetMultiplier = (OffsetLenght * PointsOffset[i]) * Multiplier;
    }

    if (Horizontal == 1) {
      PartLat = (LatStart + ((LatEnd - LatStart) * Points[i])) + OffsetMultiplier;
      PartLng = (LngStart + ((LngEnd - LngStart) * Points[i]));
    } else {
      PartLat = (LatStart + ((LatEnd - LatStart) * Points[i]));
      PartLng = (LngStart + ((LngEnd - LngStart) * Points[i])) + OffsetMultiplier;
    }

    curved_line_create_segment(LastLat, LastLng, PartLat, PartLng, Color);

    LastLat = PartLat;
    LastLng = PartLng;
  }

  curved_line_create_segment(LastLat, LastLng, LatEnd, LngEnd, Color);

}

function curved_line_create_segment(LatStart, LngStart, LatEnd, LngEnd, Color) {
  var LineCordinates = new Array();

  LineCordinates[0] = new google.maps.LatLng(LatStart, LngStart);
  LineCordinates[1] = new google.maps.LatLng(LatEnd, LngEnd);

  var Line = new google.maps.Polyline({
    path: LineCordinates,
    geodesic: false,
    strokeColor: Color,
    strokeOpacity: 1,
    strokeWeight: 3
  }); 

  Line.setMap(map);
}

HTMLコンテンツ+初期化スクリプトは次のとおりです。

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">

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

  function initialize() {

    /* Create Google Map */ 

    var myOptions = {
      zoom: 6,
      center: new google.maps.LatLng(41, 19.6),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);

    /* Add Sample Lines */

    /* Sofia - Burgas */
    curved_line_generate(42.68243562027229, 23.280029421875042, 42.488302202180364, 27.432861453125042,"#F00", true, 1);

    /* Sofia - Varna */
    curved_line_generate(42.68243562027229, 23.280029421875042, 43.19716750254011, 27.894287234375042,"#1a8809", true, 1);

    /* Ancona - Sofia */
    curved_line_generate(43.61221698671215, 13.458252078125042,42.68243562027229, 23.280029421875042, "#00F", true, 1);

    /* Sofia - Florence */
    curved_line_generate(42.68243562027229, 23.280029421875042, 43.73935229722859, 11.217041140625042,"#666", true, 1);

    /* Sofia - Athens */
    curved_line_generate(42.68243562027229, 23.280029421875042, 37.97884527841534, 23.719482546875042,"#ffa200", false, 2);
  }

</script>
5
Daniel Nanovski

Maps API v3のサンプルページからこの例をご覧ください。

http://code.google.com/apis/maps/documentation/javascript/examples/polyline-complex.html

コードはマップ上のクリックをリッスンし、クリックするたびに、緯度/経度のペアをポリラインの配列に追加します。これにより、クリックされた各ポイントを結ぶポリラインが作成されます。

これをポリゴンに拡張するのは比較的簡単です。ある時点で、ポリゴンを閉じる必要があります。これを行うには、ポリゴンまたはマーカー（交差点を示す）のクリックを聞くか、ユーザーがクリックできるボタンを使用して、ポリゴンをオートクローズに設定します。

4
plexer

これは非常に簡単だと思いました。ポリゴンを描くことができ、その長さを見つけることができ、非常に簡単です。 http://geojason.info/demos/line-length-polygon-area-google-maps-v3 /

リンクがダウンした場合のコードを次に示します。

var map;

// Create a meausure object to store our markers, MVCArrays, lines and polygons
var measure = {
  mvcLine: new google.maps.MVCArray(),
  mvcPolygon: new google.maps.MVCArray(),
  mvcMarkers: new google.maps.MVCArray(),
  line: null,
  polygon: null
};

// When the document is ready, create the map and handle clicks on it
jQuery(document).ready(function() {

  map = new google.maps.Map(document.getElementById("map"), {
    zoom: 15,
    center: new google.maps.LatLng(39.57592, -105.01476),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    draggableCursor: "crosshair" // Make the map cursor a crosshair so the user thinks they should click something
  });

  google.maps.event.addListener(map, "click", function(evt) {
    // When the map is clicked, pass the LatLng obect to the measureAdd function
    measureAdd(evt.latLng);
  });

});

function measureAdd(latLng) {

  // Add a draggable marker to the map where the user clicked
  var marker = new google.maps.Marker({
      map: map,
      position: latLng,
      draggable: true,
      raiseOnDrag: false,
      title: "Drag me to change shape",
      icon: new google.maps.MarkerImage(
        "/images/demos/markers/measure-vertex.png", 
        new google.maps.Size(9, 9),
        new google.maps.Point(0, 0),
        new google.maps.Point(5, 5)
      )
  });

  // Add this LatLng to our line and polygon MVCArrays
  // Objects added to these MVCArrays automatically update the line and polygon shapes on the map
  measure.mvcLine.Push(latLng);
  measure.mvcPolygon.Push(latLng);

  // Push this marker to an MVCArray
  // This way later we can loop through the array and remove them when measuring is done
  measure.mvcMarkers.Push(marker);

  // Get the index position of the LatLng we just pushed into the MVCArray
  // We'll need this later to update the MVCArray if the user moves the measure vertexes
  var latLngIndex = measure.mvcLine.getLength() - 1;

  // When the user mouses over the measure vertex markers, change shape and color to make it obvious they can be moved
  google.maps.event.addListener(marker, "mouseover", function() {
    marker.setIcon(
      new google.maps.MarkerImage("/images/demos/markers/measure-vertex-hover.png",
        new google.maps.Size(15, 15), 
        new google.maps.Point(0, 0), 
        new google.maps.Point(8, 8)
      )
    );
  });

  // Change back to the default marker when the user mouses out
  google.maps.event.addListener(marker, "mouseout", function() {
    marker.setIcon(
      new google.maps.MarkerImage(
        "/images/demos/markers/measure-vertex.png",
        new google.maps.Size(9, 9),
        new google.maps.Point(0, 0),
        new google.maps.Point(5, 5)
      )
    );
  });

  // When the measure vertex markers are dragged, update the geometry of the line and polygon by resetting the
  //     LatLng at this position
  google.maps.event.addListener(marker, "drag", function(evt) {
    measure.mvcLine.setAt(latLngIndex, evt.latLng);
    measure.mvcPolygon.setAt(latLngIndex, evt.latLng);
  });

  // When dragging has ended and there is more than one vertex, measure length, area.
  google.maps.event.addListener(marker, "dragend", function() {
    if (measure.mvcLine.getLength() > 1) {
      measureCalc();
    }
  });

  // If there is more than one vertex on the line
  if (measure.mvcLine.getLength() > 1) {

    // If the line hasn't been created yet
    if (!measure.line) {

      // Create the line (google.maps.Polyline)
      measure.line = new google.maps.Polyline({
        map: map,
        clickable: false,
        strokeColor: "#FF0000",
        strokeOpacity: 1,
        strokeWeight: 3,
        path:measure. mvcLine
      });

    }

    // If there is more than two vertexes for a polygon
    if (measure.mvcPolygon.getLength() > 2) {

      // If the polygon hasn't been created yet
      if (!measure.polygon) {

        // Create the polygon (google.maps.Polygon)
        measure.polygon = new google.maps.Polygon({
          clickable: false,
          map: map,
          fillOpacity: 0.25,
          strokeOpacity: 0,
          paths: measure.mvcPolygon
        });

      }

    }

  }

  // If there's more than one vertex, measure length, area.
  if (measure.mvcLine.getLength() > 1) {
      measureCalc();
  }
}
3
Raza Ahmed

これは、私が見つけたポリゴンエディターに最も近い実装のようです： http://snipplr.com/view/38270/google-maps-api-v3--enableediting-polylines/

2
Kevin