15

Markersの「ドラッグ」イベントと同様に、Googleマップでポリラインを編集中に発生するイベントを探しています。私は 'capturing_changed'イベントを見つけましたが、それはドラッグではなく、dragstartとdragendで起動するようです。マーカをドラッグし、マーカの位置に基づいてポリラインを更新することで、編集可能なポリラインを再開発する必要があります。編集可能なポリラインがスムーズに動作するマーカーを追加することができますが、ドラッグで検出できる必要があります。 APIドキュメントやGoogle検索で何も見つかりませんでしたので、ここで質問したいと思いました。Google Maps Polylineを編集するイベントハンドラですか?

編集:答えは「いいえ」のように見えますが、この機能は存在しません。

+0

あなたはそのポリライン(dragendイベントの作品を)ドラッグの火災のイベントをお探しですか?または[ポイントの挿入または変更](https://developers.google.com/maps/documentation/javascript/overlays#user_editable_shapes_events)? – geocodezip

+0

編集可能なポリラインを編集中。したがって、マーカーの「ドラッグ」に相当しますが、編集可能なモードでポリライン上の1つのポイントをドラッグすると、ポリライン全体をドラッグするのではありません。 –

答えて

20

simple Polyline example from the documentation変更時にイベントを追加するように変更されました(insert_at、remove_at、set_at、dragend)。

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="utf-8"> 
    <title>Google Maps JavaScript API v3 Example: Polyline Simple</title> 
    <link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet"> 
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> 
    <script> 
var flightPath = null; 

     function initialize() { 
     var myLatLng = new google.maps.LatLng(0, -180); 
     var mapOptions = { 
      zoom: 3, 
      center: myLatLng, 
      mapTypeId: google.maps.MapTypeId.TERRAIN 
     }; 

     var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 

     var flightPlanCoordinates = [ 
      new google.maps.LatLng(37.772323, -122.214897), 
      new google.maps.LatLng(21.291982, -157.821856), 
      new google.maps.LatLng(-18.142599, 178.431), 
      new google.maps.LatLng(-27.46758, 153.027892) 
     ]; 
     flightPath = new google.maps.Polyline({ 
      path: flightPlanCoordinates, 
      strokeColor: '#FF0000', 
      strokeOpacity: 1.0, 
      strokeWeight: 2, 
      editable: true, 
      draggable: true 
     }); 
     google.maps.event.addListener(flightPath, "dragend", getPath); 
     google.maps.event.addListener(flightPath.getPath(), "insert_at", getPath); 
     google.maps.event.addListener(flightPath.getPath(), "remove_at", getPath); 
     google.maps.event.addListener(flightPath.getPath(), "set_at", getPath); 
     flightPath.setMap(map); 
     } 

function getPath() { 
    var path = flightPath.getPath(); 
    var len = path.getLength(); 
    var coordStr = ""; 
    for (var i=0; i<len; i++) { 
    coordStr += path.getAt(i).toUrlValue(6)+"<br>"; 
    } 
    document.getElementById('path').innerHTML = coordStr; 
} 

    </script> 
    </head> 
    <body onload="initialize()"> 
    <div id="map-canvas" style="height:500px; width:600px;"></div> 
    <div id="path"></div> 
    </body> 
</html> 

working example

コードスニペット:

var flightPath = null; 
 

 
function initialize() { 
 
    var myLatLng = new google.maps.LatLng(0, -180); 
 
    var mapOptions = { 
 
    zoom: 3, 
 
    center: myLatLng, 
 
    mapTypeId: google.maps.MapTypeId.TERRAIN 
 
    }; 
 

 
    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
 

 
    var flightPlanCoordinates = [ 
 
    new google.maps.LatLng(37.772323, -122.214897), 
 
    new google.maps.LatLng(21.291982, -157.821856), 
 
    new google.maps.LatLng(-18.142599, 178.431), 
 
    new google.maps.LatLng(-27.46758, 153.027892) 
 
    ]; 
 
    flightPath = new google.maps.Polyline({ 
 
    path: flightPlanCoordinates, 
 
    strokeColor: '#FF0000', 
 
    strokeOpacity: 1.0, 
 
    strokeWeight: 2, 
 
    editable: true, 
 
    draggable: true 
 
    }); 
 
    google.maps.event.addListener(flightPath, "dragend", getPath); 
 
    google.maps.event.addListener(flightPath.getPath(), "insert_at", getPath); 
 
    google.maps.event.addListener(flightPath.getPath(), "remove_at", getPath); 
 
    google.maps.event.addListener(flightPath.getPath(), "set_at", getPath); 
 
    flightPath.setMap(map); 
 
} 
 

 
function getPath() { 
 
    var path = flightPath.getPath(); 
 
    var len = path.getLength(); 
 
    var coordStr = ""; 
 
    for (var i = 0; i < len; i++) { 
 
    coordStr += path.getAt(i).toUrlValue(6) + "<br>"; 
 
    } 
 
    document.getElementById('path').innerHTML = coordStr; 
 
} 
 
google.maps.event.addDomListener(window, 'load', initialize);
<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="path"></div> 
 
<div id="map-canvas" style="height:500px; width:600px;"></div>

+2

私が上記のコメントで明確にしたように、これは私が探しているものではありません。編集可能なポイントがドラッグされている間に発生するイベントが欲しいです。編集可能なポリラインの各編集点がマーカーであったとします。私はそのマーカーの「ドラッグ」に相当するものを望みます。 –

+0

なぜそれが必要ですか? (私はそれが存在するとは思わない、あなたは[強化要求](http://code.google.com/p/gmaps-api-issues/))を試すことができます – geocodezip

+0

私は実際に私がそれを必要としているとは思わないもう私は別の方向から問題に近づいているからです。私は基本的に、特定のウェイポイント上のマーカーと編集可能な旅行ルートを実行しており、対応するフォームはリアルタイムで双方向に更新されます。私は機能しているソリューションを持っています。それはできるだけクリーンではありません。 –

関連する問題