Нарисуйте многоугольник на карте Google - PullRequest
0 голосов
/ 24 мая 2018

Мне нужно нарисовать угол обзора камеры на карте 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);
...