3

説明

私は現在、クライアントのために Google マップ V3 を使用しています。クライアントから、接続された線の流れを作成して距離を計算できる描画ツールの実装を依頼されました。ただし、Google Maps V3 Drawing Manager ライブラリでは、ポリラインのクリック イベントをキャプチャする方法が非常に限られているようです。

私たちの規範

        google.maps.event.addListener(map, 'click', function(event){
            //TODO: Store lat/long of click for distance calculation later
        });

        google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {
            //TODO: Display the total distance of the line
        });

目標

        google.maps.event.addListener(drawingManager, 'polylineclick', function(event){
            //TODO: Store lat/long of line for distance calculation and display updated distance.
        });

ご覧のとおり、ユーザーがポリラインを作成しているときに緯度/経度をキャプチャし、ポリライン全体が完成した後ではなく、各ラインが作成されるたびに距離を表示したいと考えています。

また、カスタム ハンドラーを作成し、マップのクリック メソッドを使用して魔法をかけ、緯度/経度間に手動で線を引くことで、これを模倣できることはわかっていますが、Google Maps API に Drawing Manager のクリック メソッドがないのは奇妙に思えます。 .

明確化

最終的な目標は、ポリラインの描画中にポリラインの全長を動的に表示できるようにすることです。IE 最初に線を引くと、「Total Line is X」というセクションが表示されます。2 番目のスポットをクリックして 2 番目の線を作成すると、テキストが「x」+「y」に更新され、3 番目をクリックすると更新されます「x」+「y」+「z」などに変換します。これが、「lineDrawn」または「polylineClick」を処理してこれらの緯度/経度を保存し、動的に作成された線の長さを計算できるようにするイベントがあることを望んでいた理由です。ユーザーが線を引くのをやめて全長を確認する必要はありません。

編集:マップではなく drawingManager を使用するように、目標のaddListener を更新しました。

編集：説明セクションの追加。

4

2 に答える 2

0

これを試してください:3

var PolylineOption = {
        strokeColor : "blue",
        strokeOpacity : 0.5,
        strokeWeight : 5
};
var Display;
var rendererOptions = {
    draggable : true,
    suppressMarkers : true,
    polylineOptions : PolylineOption
};
var Service = new google.maps.DirectionsService();
Display = new google.maps.DirectionsRenderer(this.rendererOptions);
Display.setMap(map);
Service.route(this.request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
        Display.setDirections(response);                
    }
});

google.maps.event.addListener(PolylineOption, 'click', function() {
    alert(this.strokeColor);
});
于 2014-05-27T20:06:47.323 に答える