在地图上显示多边形和折线，准确地显示多个纬度

Question

我在数据库中添加了两种lat long类型的城市。

类型1.区域

输入2. Road

在多边形中使用类型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 () {
                    });
                })
            });

        }
    });

Answer 1

正如Harold所说，请为您的代码分享jsFiddle。就线条和区域的不透明度和颜色填充而言，它在地图中正确实现。从它的外观来看，您正在绘制多个交叉多边形，这些多边形将添加到图层并降低fillColor的不透明度。您需要将所有LatLng传递到一个阵列中并将它们绘制在一起以获得准确的区域。您也可以将它们作为一组独特的LatLng坐标传递，如here所示。

但是如果没有代码，就无法对其余内容发表评论。对于小样本，请查看here：