Angularjs 如何将两张地图放在同一页上，每个地图上都有一个标记？

我使用版本2.0.9在一个页面上显示两个地图，每个地图上都有一个标记。但这两个标记显示在同一地图中。有什么想法吗

html:

<ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" options="options">
  <ui-gmap-marker coords="marker.coords" options="marker.options" events="marker.events" idkey="marker.id">
  </ui-gmap-marker>
</ui-gmap-google-map>
<ui-gmap-google-map center="map2.center" zoom="map2.zoom" draggable="true" options="options">
  <ui-gmap-marker coords="marker2.coords" options="marker2.options" events="marker2.events" idkey="marker2.id">
  </ui-gmap-marker>
</ui-gmap-google-map>

普朗克

---

如果删除第一个地图中的标记标记，则标记2将正确显示在地图2中。

用作解决方法

我认为绑定有一个问题，因为它在使用时只会引用DOM中映射的第一个实例

工作示例：

---

  $scope.map = {center: {latitude: 40.1451, longitude: -99.6680 }, zoom: 4 };
  $scope.map2 = {center: {latitude: 40.1451, longitude: -99.6680 }, zoom: 4 };
  $scope.marker = {
      id: 0,
      coords: {
        latitude: 40.1451,
        longitude: -99.6680
      },
   };
   $scope.marker2 = {
      id: 1,
      coords: {
        latitude: 42,
        longitude: -99
      }
   }

<div class="map_canvas" ng-controller="mainCtrl">
  <ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" >
    <ui-gmap-markers models='markers' coords="'coords'" options="marker.options" idkey="marker.id">
    </ui-gmap-markers>
  </ui-gmap-google-map>
  <ui-gmap-google-map center="map2.center" zoom="map2.zoom" draggable="true" >
    <ui-gmap-markers models="markers2" coords="'coords'" options="marker2.options" idkey="marker2.id">
    </ui-gmap-markers>
  </ui-gmap-google-map>
</div>