让 Google 地图与 AngularJS 一起工作答案

【问题标题】：Getting Google Maps to Work with AngularJS让 Google 地图与 AngularJS 一起工作
【发布时间】：2019-05-26 08:31:20
【问题描述】：

我似乎无法使用 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/

【问题讨论】：

看看这个jsfiddle.net/3J25M/413
你能在迭代位置之前添加一个 console.log(locations.length) 吗？检查是否为0。您可以尝试的另一件事是从您正在创建的标记对象中删除 icon:icon，并检查是否加载了默认标记。
另外，你的 jsfiddle 不起作用的原因是你在 setMarkers 中创建标记对象时需要放置 map:map 而不是 map:Map

标签： javascript angularjs google-maps google-maps-api-3

【解决方案1】：

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

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

【讨论】：