Question

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

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],

使Google Maps与AngularJS一起使用

1 个答案: