drawing - 複数 - polyline google maps api v3




google maps API v3-動的ポリゴン/ポリラインの描画方法 (4)

Google Maps v3.7の場合は、 図面ライブラリ

別の良いライブラリ: polygonEdit/polylineEdit[email protected]

私は4日間のGoogle Maps Javascript APIの経験があり、ドキュメントと情報の共有が混乱していることが分かります。

誰かがthis例に似たGoogleマップ(Javascript API V3を使用)でポリゴン/ポリラインを描画する方法に関する経験や知識を持っていますか? (私はthis blogPostから2008年に見つけた)

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

私は研究を続けるつもりですが、有用なコメントやリンクや提案に感謝します。 あなたがさらなる研究のための正しい方向に私を向ける場合でも。 :)


Maps API v3の例のページからこの例を見てみましょう:

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

コードはマップのクリックをリッスンし、クリックするたびに余分なlat / lngペアをポリラインの配列に追加します。 これにより、クリックされた各点を結合するポリラインが生成されます。

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


多くの研究の後、私はthis例に遭遇しthis 。 それは、それを発見して、それを検索した後、私のような質問に対する一般的な答えのようです。 これは非常に基本的ですが、V3 APIによれば正しいです。

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

plexerの答えに対する私のコメントで提供されたリンクは最良の解決策になりますが、それを開発している人はまだ開発中であるため、リリースアプリケーションでの使用には十分安定していません。


曲線のスクリプトを見てみましょう: http://curved_lines.overfx.net/ : 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>