Question

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

地图中只有一个标记。

这是我的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>

My 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

Answer 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" }
  };


});

AND 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

Answer 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);

在地图中显示多个点

Answer 3

您的代码运行正常。刚刚添加了markers

的ng-repeat数组

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

angular js：无法在谷歌地图中添加标记

3 个答案: