让谷歌地图与AngularJS一起工作

Question

我似乎无法使用angularJS在我的谷歌地图上填充标记

.HTML

<section class="module module-divider-bottom p-0" style="height: 500px;" ng-controller="LocationsController">
  <div id="map"></div>
</section>

AngularJS 控制器

angular.module('cuApp')
.controller('LocationsController',
    [
        '$scope', 'LocationsService', '$compile',
        function($scope, locationsService, $compile) {
            $scope.map = '';
            $scope.model = {
                canvasLocationsData: [],
                canvasLocationMarkers: []
            };
            locationsService.GetCanvasLocations().then(function(response) {
                    if (response.data) {
                        $scope.model.canvasLocations = response.data;
                        angular.forEach(response.data.response.locations,
                            function(value, key) {
                                if (value.locatorType === "S") {
                                    $scope.model.canvasLocationsData.push(value);
                                    var tempArry = [];
                                    tempArry.push(value.institutionName);
                                    tempArry.push(value.latitude);
                                    tempArry.push(value.longitude);
                                    $scope.model.canvasLocationMarkers.push(tempArry);
                                }
                            });

                    }
                });
            function initialize() {
                var initLatLng = { lat: 39.742043, lng: -104.991531 };
                var mapOptions = {
                    zoom: 10,
                    center: initLatLng,
                    mapTypeControl: false
                };
                $scope.map = new google.maps.Map(document.getElementById('map'), mapOptions);
                setMarkers($scope.map);
            }
            var locations = $scope.model.canvasLocationMarkers;
            function setMarkers(Map) {
                var icon = {
                    url: '/files/imgs/cnv_marker.png', 
                };
                for (var i = 0; i < locations.length; i++) {
                    var location = locations[i];
                    var marker = new google.maps.Marker({
                        position: new google.maps.LatLng(location[1], location[2]),
                        map: Map,
                        icon: icon,
                        title: location[0]
                    });
                }
            }
            google.maps.event.addDomListener(window, 'load', initialize);
        }
    ]);

位置看起来像这样，它是一个数组数组：

0:["Canvas CU", "39.748500", "-104.997000"]
1:["Canvas CU", "39.745200", "-105.006000"]
2:["Canvas CU", "39.729300", "-104.941000"]

地图将在 html 页面上成功加载，但标记永远不会显示。我不确定这是否是因为获取标记数据的调用是在地图加载后传入的，并且在加载时$scope.model.canvasLocationMarkers为空，或者我的代码有问题。

JSFiddle：不使用AngularJS，但仍然无法显示标记：https://jsfiddle.net/n29au068/4/

Answer 1

你使用了函数 Map 而不是局部变量 map将其更改为小写地图

        position: new google.maps.LatLng(location[1], location[2]),
        //map: Map,        is wrong
        map: map,
        icon: icon,
        title: location[0],