Question

我有这个代码用于显示圈子扇区。这段代码几周前就停止了。我对这个api不太熟悉，可能会有所改变。我只看到没有任何标记的地图。

有人可以帮我找错吗？

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Test</title>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <!-- Le styles -->
<style type="text/css">

    #map_canvas {
        height: 80%;
      }
      #map_canvas {
        height: 400px;
      }

      #map {
        width: 800px;
        height: 500px;
      }
</style>
    <script>

      // Create an object containing LatLng, population.
        var koordid = {};

        var ringid;

        var arcs = {};
        arcs[0] = {
            center : new google.maps.LatLng(50.083666666667, 14.479111111111),
            startAngle : 208,
            endAngle : 272,
            radius : 734,
            innerRadius : 0
        }

        function drawArc(map,arc) { 
            var points = 36; 
            var extpoints = new Array();
            var deltaAngle = (arc.endAngle - arc.startAngle) / points;

            if (arc.innerRadius > 0) {
                extpoints.push(new google.maps.geometry.spherical.computeOffset(arc.center, arc.innerRadius, arc.startAngle));
                for (var i=0; (i < points + 1); i++) { 
                    extpoints.push(new google.maps.geometry.spherical.computeOffset(arc.center, arc.radius, arc.startAngle + i * deltaAngle));
                }
                for (var i=points; (i > -1); i--) {
                    extpoints.push(new google.maps.geometry.spherical.computeOffset(arc.center, arc.innerRadius, arc.startAngle + i * deltaAngle));
                }
            } else {
                extpoints.push(arc.center);
                for (var i=0; (i < points + 1); i++) { 
                    extpoints.push(new google.maps.geometry.spherical.computeOffset(arc.center, arc.radius, arc.startAngle + i * deltaAngle));
                } 
            }

            var arc = new google.maps.Polygon({
                path: [extpoints],
                strokeColor: "#FF0000",
                strokeOpacity: 0.8,
                strokeWeight: 2,
                fillColor: "#FF0000",
                fillOpacity: 0.35,
            });
            arc.setMap(map);
        }

        function initialize() {
            var mapOptions = {
                zoom: 15,
                center: new google.maps.LatLng(50.083666666667, 14.479111111111),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

            for (var koord in koordid) {
                var raadiusOptions = {};
                raadiusOptions = {
                    strokeColor: "#FF0000",
                    strokeOpacity: 0.8,
                    strokeWeight: 2,
                    fillColor: "#FF0000",
                    fillOpacity: 0.35,
                    map: map,
                    center: koordid[koord].center,
                    radius: koordid[koord].raadius
                };
                if (koord == 'tsoon') {
                    raadiusOptions.strokeColor = "#000000";
                    raadiusOptions.fillColor = "#000000";
                }
                ringid = new google.maps.Circle(raadiusOptions);
            }

            drawArc(map,arcs[0]);

        }
    </script>

  </head>

<body onload="initialize()">      
<div id="map_canvas"></div>
  </body>
</html>

Answer 1

您没有在代码中包含几何库（但我想在您的生产版本中包含它）

问题是这个（drawArc）：

path: [extpoints]

当你使用path-property时，它必须是一个包含LatLng的数组，但你提供的数组包含一个带LatLng的数组（当你提供它为paths时会起作用 - 属性）

您可以使用

path: extpoints

或

paths: [extpoints]

working fiddle

Google maps api - Circle部门停止工作

1 个答案: