【发布时间】：2017-04-07 19:55:45
【问题描述】：
我目前正在尝试启动并运行一个简单的应用程序，该应用程序使用 NgMap 在美国地图上覆盖自定义多边形。我一直在关注这个例子NgMap Simple Polygon。与此示例相比，我最大的不同是我最终将过渡到从本地 json 文件中提取数据。这是我的控制器代码和我的 html 代码。
(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];
})
};
};
})();<!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>可悲的是，当我运行当前代码时，我在控制台中收到此错误。
TypeError：无法读取未定义的属性“id” 在 __MapController.vm.addObject (http://localhost:64080/libraries/ng-map.js:67:30) 在 linkFunc (http://localhost:64080/libraries/ng-map.js:2084:21) 在 invokeLinkFn (http://localhost:64080/libraries/angularjs/angular.js:9694:9) 在 nodeLinkFn (http://localhost:64080/libraries/angularjs/angular.js:9093:11) 在compositeLinkFn (http://localhost:64080/libraries/angularjs/angular.js:8397:13) 在 nodeLinkFn (http://localhost:64080/libraries/angularjs/angular.js:9088:24) 在compositeLinkFn (http://localhost:64080/libraries/angularjs/angular.js:8397:13) 在 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)
这是未定义对象导致错误的函数调用。
/**
* 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');
}
}
};形状标签中的内容似乎没有被正确解析？我不确定在这里做什么。对这个问题有任何见解吗？谢谢！
【问题讨论】：
标签： javascript angularjs google-maps ng-map