1

ここのようなルート方向でポリゴンを作成したい: http://i.imgur.com/olGmuN6.pngだから私はこれを書く:

directionService.route(request, function(result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsRenderer.setDirections(result);
        var r = [];
        var z = 0.5;
        var bla = result.routes[0].overview_path;
        for(var i=0 in result.routes[0].overview_path) {
            r.push(new google.maps.LatLng(bla[i].lat()+z, bla[i].lng()-z));
        }
        bla.reverse();
        for(var x=0 in bla) {
            r.push(new google.maps.LatLng(bla[x].lat()-z, bla[x].lng()+z));
        }

        var prva = new google.maps.Polyline({
            path: result.routes[0].overview_path,
            strokeColor: "#00000",
            strokeOpacity: 1.0,
            strokeWeight: 2
        });

        prva.setMap(map);

        druga = new google.maps.Polygon({
            paths: r,
            strokeColor: "#FF0000",
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: "#FF0000",
            fillOpacity: 0.35
        });

        druga.setMap(map);

    } else {
      alert("Directions query failed: " + status);
    }
  });

しかし、場合によっては良い場合とそうでない場合があるため、私のコードはこれを生成します:

   BAD case:

ここに画像の説明を入力 良い： ここに画像の説明を入力

では、この問題を解決して、ルート方向によって素敵なポリゴンを取得するにはどうすればよいですか??? 誰かがアイデアを持っていますか？

これをコードに実装する方法: http://i.imm.io/1gMu5.png

これ以外に必要なものを作成する方法はありますか...

4

1 に答える 1

0

私の理解が正しければ、ポリラインを太字にする (またはポリラインの周りにオフセット ポリゴンを作成する) 必要があります。

オフセットには、 Javascript Clipper Libraryを使用できます。次のポリライン (ルート) がある場合:

ここに画像の説明を入力

Clipper を使用して、その下にオフセット ポリゴンを作成できます。

ここに画像の説明を入力

コードの重要な部分は次のとおりです ( JSBIN 内):

var パス = [[{"X":72,"Y":59.45},{"X":136,"Y":66},{"X":170,"Y":99},{"X ":171,"Y":114},{"X":183,"Y":125},{"X":218,"Y":144},{"X":218,"Y": 165},{"X":226,"Y":193},{"X":254,"Y":195},{"X":283,"Y":195},{"X": 292,"Y":202},{"X":325,"Y":213},{"X":341,"Y":234},{"X":397,"Y":245} ,{"X":417,"Y":248}]];

var スケール = 100;
ClipperLib.JS.ScaleUpPaths(パス、スケール);

var ソリューション = 新しい ClipperLib.Paths();
var co = new ClipperLib.ClipperOffset();
co.AddPaths(パス、ClipperLib.JoinType.jtRound、ClipperLib.EndType.etOpenRound);
co.Execute(ソリューション、25 * スケール);

編集:これは、「ポリラインのオフセット」という名前の問題に対する一般的な解決策です。私は Google マップやその他の地図ソフトウェアの秘密を知りません。そのため、問題の正確な解決策はあなたの手に委ねられています。

于 2013-10-09T10:07:57.710 に答える