Angularjs 在地图上使用多个lat long精确显示多边形和多段线

我在数据库中添加了多个具有两种lat-long类型的城市

类型1。区域

类型2。道路

类型1数据用于多边形，类型2数据用于多段线。但多边形和多段线并不像图像中的蓝色区域通过多边形和黑色线通过多段线那样清晰显示。请让我知道我如何才能画出准确的区域（需要低透明度，但正确填充颜色区域）和一条线（只有一条线）

我的代码是：

.controller('AllDistrictLayer', function ($scope, $state, $ionicLoading, $stateParams, $localStorage) {
        $scope.loading = $ionicLoading.show({
            content: 'Getting current location...',
            showBackdrop: true
        });
        var map = null;
        var mapDefaults = {
            zoom: 8,
            center: null,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var mapPosition = new google.maps.LatLng(30.722727472053084, 76.6519546508789);
        mapDefaults.center = mapPosition;
        map = new google.maps.Map(document.getElementById("map"), mapDefaults);
        var directionsDisplay;
        var directionsService = new google.maps.DirectionsService();
        var map;
        var polyline;
        var marker;
        var array_data = [];
        var array_path = [];
        var i = 0;
        var j = 0;
        $(function () {
            setTimeout(loadajax, 10000);
        });

        function loadajax() {
            $.ajax({
                url: "http://webapi.nuavnu.ca/api/route",
                type: 'GET',
                data: { type: 1 },
                success: function (data) {
                    $ionicLoading.hide();
                    console.log(data);
                    var dbMapPoints = JSON.parse(data.AllrouteofMC);
                    mapdata(dbMapPoints);
                }

            });

            $.ajax({
                url: "http://webapi.nuavnu.ca/api/route",
                type: 'GET',
                data: { type: 2 },
                success: function (data) {
                    $ionicLoading.hide();
                    initialize(JSON.parse(data.AllrouteofMC));
                }
            });
        }
        function getRandomColor() {
            var letters = '0123456789ABCDEF'.split('');
            var color = '#';
            for (var i = 0; i < 6; i++) {
                color += letters[Math.floor(Math.random() * 16)];
            }
            return color;
        }

  // ** For Type 1 Area**

        function mapdata(dbMapPoints) {
            $.each(dbMapPoints, function (key, index) {
                var latlng = [];
                var mycolor = getRandomColor();
                $.when($.each($.grep(dbMapPoints, function (n, i) { return (n.MCId === index.MCId); }), function () {

                    latlng.push(new google.maps.LatLng(this.GPS_Lat, this.GPS_Long));
                    mapPoly = new google.maps.Polygon({
                        paths: latlng,
                        strokeColor: "#FF8800",
                        strokeOpacity: 0.00,
                        strokeWeight: 3,
                        fillColor: "blue",
                        fillOpacity: 0.2
                    });
                    mapPoly.setMap(map);

                })).done(function () {
                });
            });
        }
      });

  // ** For Type 2 Roads** 

        function initialize(Mapdata) {
            $(function () {
                $.each(Mapdata, function (key, index) {
                    var latlng = [];
                    $.when($.each($.grep(Mapdata, function (n, i) { return (n.MCId === index.MCId); }), function () {
                        latlng.push(new google.maps.LatLng(this.GPS_Lat, this.GPS_Long));
                        var flightPath = new google.maps.Polyline({
                            path: latlng,
                            geodesic: true,
                            strokeColor: '#000000',
                            strokeOpacity: 1.0,
                            strokeWeight: 2
                        });

                        flightPath.setMap(map);

                    })).done(function () {
                    });
                })
            });

        }
    });

.controller（'AllDistrictLayer'，函数（$scope、$state、$ionicLoading、$stateParams、$localStorage）{
$scope.loading=$ionicLoading.show({
内容：“正在获取当前位置…”，
背景：真的
});
var-map=null；
变量映射默认值={
缩放：8，
中心：空，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var mapPosition=new google.maps.LatLng（30.722727472053084,76.6519546508789）；
mapDefaults.center=mapPosition；
map=new google.maps.map（document.getElementById（“map”），MapDefault）；
var方向显示；
var directionsService=new google.maps.directionsService（）；
var映射；
var多段线；
var标记；
变量数组_数据=[]；
变量数组_路径=[]；
var i=0；
var j=0；
$（函数（）{
setTimeout（loadajax，10000）；
});
函数loadajax（）{
$.ajax({
url:“http://webapi.nuavnu.ca/api/route",
键入：“GET”，
数据：{type:1}，
成功：功能（数据）{
$ionicLoading.hide（）；
控制台日志（数据）；
var dbMapPoints=JSON.parse（data.AllrouteofMC）；
mapdata（数据库管理系统）；
}
});
$.ajax({
url:“http://webapi.nuavnu.ca/api/route",
键入：“GET”，
数据：{type:2}，
成功：功能（数据）{
$ionicLoading.hide（）；
初始化（JSON.parse（data.AllrouteofMC））；
}
});
}
函数getRandomColor（）{
变量字母='0123456789ABCDEF'。拆分（''）；
var color='#'；
对于（变量i=0；i<6；i++）{
颜色+=字母[Math.floor（Math.random（）*16）]；
}
返回颜色；
}
//**适用于1类区域**
函数mapdata（DBMS指定）{
$.each（DBM指定、函数（键、索引）{
var latlng=[]；
var mycolor=getRandomColor（）；
$.when（$.each（$.grep（dbMapPoints，函数（n，i）{return（n.MCId==index.MCId）；}），函数（）{
推（新的google.maps.latlng（this.GPS_-Lat，this.GPS_-Long））；
mapPoly=新建google.maps.Polygon({
路径：latlng，
strokeColor:#FF8800“，
笔划不透明度：0.00，
冲程重量：3，
填充颜色：“蓝色”，
填充不透明度：0.2
});
setMap（map）；
})).done（函数（）{
});
});
}
});
//**适用于2类道路**
函数初始化（Mapdata）{
$（函数（）{
$.each（映射数据、函数（键、索引）{
var latlng=[]；
$.when（$.each（$.grep（Mapdata，函数（n，i）{return（n.MCId==index.MCId）；}），函数（）{
推（新的google.maps.latlng（this.GPS_-Lat，this.GPS_-Long））；
var flightPath=new google.maps.Polyline({
路径：latlng，
测地线：正确，
strokeColor:“#000000”，
笔划不透明度：1.0，
冲程重量：2
});
flightPath.setMap（map）；
})).done（函数（）{
});
})
});
}
});

正如Harold提到的，请为您的代码共享JSFIDLE。就线条和区域的不透明度和颜色填充而言，它在地图中得到了正确的实现。从外观上看，您正在绘制多个相交多边形，这些多边形正在添加到层中并降低

fillColor

的不透明度。您需要在单个阵列中传递所有LatLngs，并将它们绘制在一起，以获得准确的面积。您还可以将它们作为一组唯一的LatLng坐标传递，如图所示

---

但是如果没有代码，就不能对其余部分进行评论。对于一个小示例，请看：

您可以共享代码的JSFIDLE或代码笔吗？