问题描述:

I use angular-google-maps version 2.0.9 to display two maps on one page, each one with a marker. But the 2 markers display in the same map. Any idea?

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>

controller.js :

 $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

}

}

Plunker here

If I remove the marker tag in the first map, the marker2 correctly displays in map2.

网友答案:

Use as a work around.

I believe there is a issue with binding as it would only reference the first instance of the map in the DOM when using .

Working example: http://plnkr.co/edit/DzPosZ85cMjs7hretr66?p=preview

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

相关阅读:
Top