Question

我目前正在尝试启动并运行一个简单的应用程序，它使用NgMap在美国地图上叠加自定义多边形。我一直在关注这个例子NgMap Simple Polygon。我将与此示例相比最大的区别是我最终将转换为从本地json文件中提取数据。这是我的控制器代码和我的HTML代码。

＆＃13;

(function () {
    var app = angular.module("testApp", ['ngMap']);
    app.controller("MapController", MapController);
    MapController.$inject = ['$scope', '$timeout', '$http', '$window', 'NgMap'];
    function MapController($scope, $timeout, $http, $window, NgMap) {
        $scope.eastern = getRegionInfo("eastern");
        $scope.florida = [];
        $scope.gateway = [];
        $scope.metroNortheast = [];
        $scope.midAmerica = [];
        $scope.midWest = [];
        $scope.newEnglad = [];
        $scope.northern = [];
        $scope.southern = [];
        $scope.southwest = [];
        $scope.western = [];
        var easternRegion = new google.maps.Polygon({

        });
        function getRegionInfo(region) {
        $http.get("data/regions.txt").success(function (data) {
            $scope[region] = data[region];
        })
        };
    };

})();

＆＃13;

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta name="description" content="Simple Map">
    <meta name="keywords" content="ng-map,AngularJS,center">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <script src="./libraries/angularjs/angular.js">
    </script><script src="http://maps.google.com/maps/api/js?key=AIzaSyCi1Dh2ssMKOEwzvOWtDOfQA2gtKMK_yBM&libraries=placeses,visualization,drawing,geometry,places"></script>
    <script src="./views/MapController.js"></script>
    <script src="./libraries/bootstrap/js/ui-bootstrap-tpls-2.0.0.js"></script>
    <script src="./libraries/ng-map.js"></script>  

    <link href="./libraries/bootstrap/css/bootstrap.css" rel="stylesheet">
    <title>Test</title>
</head>
<body ng-app="testApp">
    <div ng-controller="MapController as App">
        <ng-map center="[40.74, -74.18]"
                map-type-id="TERRAIN">
            <shape name="easternRegion"
                   paths="[
                       [25.774252, -80.190262],
                       [18.466465, -66.118292],
                       [32.321384, -64.75737],
                       [25.774252, -80.190262]
                     ]"
                   stroke-color="#FF0000"
                   stroke-opacity="0.8"
                   stroke-weight="2"
                   fill-color="#FF0000"
                   fill-opacity="0.35">
            </shape>
        </ng-map>
    </div>

</body>
</html>

＆＃13;

可悲的是，当我运行当前代码时，我在控制台中收到此错误。

TypeError：无法读取属性＆＃39; id＆＃39;未定义的 at __MapController.vm.addObject（http://localhost:64080/libraries/ng-map.js:67:30）在linkFunc（http://localhost:64080/libraries/ng-map.js:2084:21） at invokeLinkFn（http://localhost:64080/libraries/angularjs/angular.js:9694:9） at nodeLinkFn（http://localhost:64080/libraries/angularjs/angular.js:9093:11）在compositeLinkFn（http://localhost:64080/libraries/angularjs/angular.js:8397:13） at nodeLinkFn（http://localhost:64080/libraries/angularjs/angular.js:9088:24）在compositeLinkFn（http://localhost:64080/libraries/angularjs/angular.js:8397:13） at nodeLinkFn（http://localhost:64080/libraries/angularjs/angular.js:9088:24）在compositeLinkFn（http://localhost:64080/libraries/angularjs/angular.js:8397:13）在compositeLinkFn（http://localhost:64080/libraries/angularjs/angular.js:8400:13）

这是函数调用，其中未定义的对象导致错误。

＆＃13;

 /**
     * Add an object to the collection of group
     * @memberof __MapController
     * @function addObject
     * @param groupName the name of collection that object belongs to
     * @param obj  an object to add into a collection, i.e. marker, shape
     */
    vm.addObject = function(groupName, obj) {
      if (vm.map) {
        vm.map[groupName] = vm.map[groupName] || {};
        var len = Object.keys(vm.map[groupName]).length;
        vm.map[groupName][obj.id || len] = obj;

        if (vm.map instanceof google.maps.Map) {
          //infoWindow.setMap works like infoWindow.open
          if (groupName != "infoWindows" && obj.setMap) {
            obj.setMap && obj.setMap(vm.map);
          }
          if (obj.centered && obj.position) {
            vm.map.setCenter(obj.position);
          }
          (groupName == 'markers') && vm.objectChanged('markers');
          (groupName == 'customMarkers') && vm.objectChanged('customMarkers');
        }
      }
    };

＆＃13;

似乎形状标签中的内容未正确解析？我不知道该怎么做。有关此问题的任何见解？谢谢！

Answer 1

由于以下声明而发生错误：

<shape name="easternRegion"
             ^^^^^^^^^^^^^
            unknown shape type

关键是name指令的shape属性是为以下值（共享类型）保留的：

circle
polygon
polyline
rectangle
groundOverlay(or image)

在你的情况下，形状没有初始化。

修改示例

<script src="https://maps.googleapis.com/maps/api/js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script>
    <script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
 
 <div ng-app="ngMap">
        <ng-map  center="[25.774252, -80.190262]" zoom="4"
                map-type-id="TERRAIN">
            <shape name="polygon"
                   paths="[
                       [25.774252, -80.190262],
                       [18.466465, -66.118292],
                       [32.321384, -64.75737],
                       [25.774252, -80.190262]
                     ]"
                   stroke-color="#FF0000"
                   stroke-opacity="0.8"
                   stroke-weight="2"
                   fill-color="#FF0000"
                   fill-opacity="0.35">
            </shape>
        </ng-map>
</div>

对于ng-map，形状对象未定义

1 个答案: