角度js：无法在谷歌地图中添加标记答案

【问题标题】：angular js: Unable to add marker in google map角度js：无法在谷歌地图中添加标记
【发布时间】：2016-10-31 20:14:08
【问题描述】：

我正在尝试在谷歌地图中添加一个标记，但不幸的是，它没有被添加。

地图中只有一个标记。

这是我的 HTML：

<div ng-app="myApp" ng-controller="gMap">
  <ui-gmap-google-map 
    center='map.center' 
    zoom='map.zoom' aria-label="Google map">

    <ui-gmap-marker ng-repeat="marker in markers"
      coords="marker.coords" options="marker.options" events="marker.events" idkey="marker.id">
      <ui-gmap-window>
        <div>{{marker.window.title}}</div>
      </ui-gmap-window>
    </ui-gmap-marker>

  </ui-gmap-google-map>
</div>

我的 Angular 代码如下所示：

var myApp = angular.module('myApp', ['uiGmapgoogle-maps']);

myApp.controller("gMap",function($scope){
  $scope.map = { 
    center: { latitude: 39.8282, longitude: -98.5795 }, 
    zoom: 4 
  };

  $scope.markers.id = "1";
  $scope.markers.coords.latitude = "40.7903";
  $scope.markers.coords.longitude = "-73.9597";
  $scope.markers.window.title = "Manhattan New York, NY";

});

CODEPEN

【问题讨论】：

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

【解决方案1】：

稍微改了一下代码，得到了结果。

var myApp = angular.module('myApp', ['uiGmapgoogle-maps']);

myApp.controller("gMap",function($scope){
  $scope.map = { 
    center: { latitude: 39.8282, longitude: -98.5795 }, 
    zoom: 4 
  };

  $scope.marker = { 
    coords: { latitude: 39.8282, longitude: -98.5795 }, 
    id: 4 ,
    window: { title: "Manhattan New York, NY" }
  };


});

而 HTML 变成了：

<div ng-app="myApp" ng-controller="gMap">
  <ui-gmap-google-map 
    center='map.center' 
    zoom='map.zoom' aria-label="Google map">

    <ui-gmap-marker 
      coords="marker.coords" options="marker.options" events="marker.events" idkey="marker.id">
      <ui-gmap-window>
        <div>{{marker.window.title}}</div>
      </ui-gmap-window>
    </ui-gmap-marker>

  </ui-gmap-google-map>
</div>

CODEPEN

【讨论】：

【解决方案2】：

将控制器更改为：

myApp.controller("gMap",function($scope){
  $scope.map = { 
    center: { latitude: 39.8282, longitude: -98.5795 }, 
    zoom: 4 
  };

  $scope.markers = [];
  $scope.marker = {
    id: 1,
    coords: {
      latitude: "40.7903",
      longitude: "-73.9597",
    },
    window: {
      title: "Manhattan New York, NY",
    }
  };
  $scope.markers.push($scope.marker);
});

为什么？

markers 是 HTML 中的一个数组。在控制器中你没有声明它。

marker 是一个对象。

您现在可以创建更多标记并将其推送到markers 以在地图中显示多个$scope.markers.push($scope.otherMarker); 点

【讨论】：

对不起，我的答案是不止一个标记，即使只适用于一个

【解决方案3】：

您的代码运行良好。刚刚添加了markers 数组，其中有一个ng-repeat

这是一个有效的codePen：http://codepen.io/anon/pen/WxpaqE

【讨论】：