使用javascript创建复杂多边形

使用javascript创建复杂多边形,javascript,jquery,google-maps,polygon,Javascript,Jquery,Google Maps,Polygon,我想按布线方向创建一个多边形,如下所示:所以我写下: directionService.route(request, function(result, status) { if (status == google.maps.DirectionsStatus.OK) { directionsRenderer.setDirections(result); var r = []; var z = 0.5; var bla = resu

我想按布线方向创建一个多边形,如下所示:所以我写下:

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:
好:

那么我如何解决这个问题,通过布线方向得到漂亮的多边形呢???有人知道吗

如何在代码中实现这一点:


是否有其他方法来创建我需要的…

如果我理解正确,您希望加粗多段线或围绕多段线创建偏移多边形

对于补偿,您可以使用。如果有以下多段线布线:

可以使用剪裁器在其下方创建偏移多边形:

以下是中代码的基本部分:


编辑:这是名为偏移多段线的问题的通用解决方案。我不知道谷歌地图或任何其他地图软件的秘密,因此您的问题的确切解决方案在您手中。

很抱歉,我无法发布图像,因为我没有10个声誉,所以您必须将链接复制到浏览器中…-如何实现这个算法。。。 var paths = [[{"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 scale = 100; ClipperLib.JS.ScaleUpPaths(paths, scale); var solution = new ClipperLib.Paths(); var co = new ClipperLib.ClipperOffset(); co.AddPaths(paths, ClipperLib.JoinType.jtRound, ClipperLib.EndType.etOpenRound); co.Execute(solution, 25 * scale);