在谷歌地图上绘制多边形

时间:2018-05-24 10:54:32

标签: google-maps

我需要为Google地图绘制相机视角。这是相对视角,视角最大为180°,但如果角度较大,我需要另一种解决方案而不是绘制三角形。

这是我想要实现的一个例子:

enter image description here

有人知道我该如何做到这一点? 中心点是标记。

这是我的绘制角度低于180度的代码:

    var fillTriangles = [];
    fillColorVAR = "#007caf";
    fillOpacityVAR = "";
    fillAlphaVAR = "0.25";
    strokeColorVAR = "#000000";

    var this_marker_home = marker.getPosition();
    var startPoint = new LatLon(this_marker_home.lat(), this_marker_home.lng());

    // prepare the direction for point calculation
    var pointOneDirection = parseInt(300) - ( 90 / 2 );
    var pointTwoDirection = parseInt(300) + ( 90 / 2 );

    // other points needed for the triangle
    var pointOne = startPoint.destinationPoint(pointOneDirection, 0.5);
    var pointTwo = startPoint.destinationPoint(pointTwoDirection, 0.5);

    // make a triangle with fill
    var fillTrianglePath = [
        new google.maps.LatLng(this_marker_home.lat(), this_marker_home.lng()),
        new google.maps.LatLng(pointOne.lat, pointOne.lon),
        new google.maps.LatLng(pointTwo.lat, pointTwo.lon),
        new google.maps.LatLng(this_marker_home.lat(), this_marker_home.lng())
    ];
    fillTriangles = new google.maps.Polygon({
        paths       : fillTrianglePath,
        strokeWeight: 0,
        fillColor   : fillColorVAR,
        fillOpacity : fillAlphaVAR
    });
    fillTriangles.setMap(map);

    // make a line as an open stroke for the fill
    var strokeTrianglePath = [
        new google.maps.LatLng(pointOne.lat, pointOne.lon),
        new google.maps.LatLng(this_marker_home.lat(), this_marker_home.lng()),
        new google.maps.LatLng(pointTwo.lat, pointTwo.lon)
    ];
    strokeTriangles = new google.maps.Polyline({
        path         : strokeTrianglePath,
        geodesic     : true,
        strokeColor  : strokeColorVAR,
        strokeOpacity: 1.0,
        strokeWeight : 2
    });
    strokeTriangles.setMap(map);

0 个答案:

没有答案