Angular Google 地图 - 显示来自两个数据模型的坐标

Question

我正在尝试在一个地图视图上加载两个带有 Angular Google 地图的数据模型。我能够加载一个数据模型来显示，但无法显示来自不同服务的第二组坐标。任何帮助是极大的赞赏。下面是我的代码。

 <ui-gmap-google-map 
center="map.center" 
zoom="map.zoom">
<style>
 .angular-google-map-container { height: 500px; weight:100%; }
</style> 
<ui-gmap-markers
   models="markers"
   coords="'coords'" 
   options="'options'" 
   events="'events'" 
   idkey="'_id'">
   <ui-gmap-windows show="show">
      <div ng-non-bindable>
        <div id="window">
           <h4>{{name}}</h4>
           <h5>{{latitude}}</h5> 
           <h5>{{longitude}}</h5>
       </div>
    </ui-gmap-windows>
</ui-gmap-marker>
 <!--second set of markers--> 
<ui-gmap-markers
   models="trips"
   coords="'coords'" 
   options="'options'" 
   events="'events'" 
   idkey="'_id'">

</ui-gmap-marker>

地图控制器：

.controller('MapCtrl', function($state, $scope, LocFac, TripFac) {  

  setlat = 14.522;
  setlong = 121.0552; 
  //map display options 
  $scope.map = { 
  center: { latitude: setlat, longitude: setlong }, 
  zoom: 4
 };

 //markers
 $scope.markers = []; 

 LocFac.getLocations().then(function(data) {
    var markers = data.data; 

    angular.forEach(markers, function(marker) {      
      marker.coords = { 
        latitude: marker.latitude, 
        longitude: marker.longitude
      }
    });

    $scope.markers = markers;  
 }); 

 //trips
 $scope.trips = []; 

 TripFac.allTrips().then(function(data) { 

    var trips = data.data;  

    angular.forEach(trips, function(marker) { 
      marker.coords = { 
        latitude: marker.currentlatitude,
        longitude: marker.currentlongitude
      }

     console.log(marker.coords.latitude);
   }); 

    $scope.trips = trips; 
 });  

 })

Answer 1

在您的示例中，ui-gmap-windows 指令的模板缺少 closing div 标记，我在显示所提供模板的标记时遇到了同样的问题.

所以，而不是：

<ui-gmap-windows show="show">
      <div ng-non-bindable>
        <div id="window">
           <h4>{{name}}</h4>
           <h5>{{latitude}}</h5> 
           <h5>{{longitude}}</h5>
      </div>
</ui-gmap-windows>

应该是：

<ui-gmap-windows show="show">
     <div ng-non-bindable>
         <div id="window">
           <h4>{{name}}</h4>
           <h5>{{latitude}}</h5> 
           <h5>{{longitude}}</h5>
         </div>  
     </div>
 </ui-gmap-windows>

例子

//Angular App Module and Controller
angular.module('mapsApp', ['uiGmapgoogle-maps'])
    .controller('MapCtrl', function ($scope) {
 
        //map display options 
        $scope.map = {
            center: { latitude: 14.522, longitude: 121.0552 },
            zoom: 4
        };

        //markers
        $scope.markers = [
            { _id: 1, name: 'Hong Kong', coords: {latitude : 22.268685, longitude: 114.178001 }},
            { _id: 2, name: 'Shanghai', coords: {latitude : 31.219346, longitude: 121.443763 }},
            { _id: 3, name: 'New Delhi', coords: {latitude : 28.614029, longitude: 77.221899 }}
        ];
         

        //trips
        $scope.trips = [
            { _id: 1, name: 'Mumbai', coords: {latitude : 19.070770, longitude: 72.877731 }},
        ];

    });

 .angular-google-map-container { height: 500px; weight:100%; }

<script src='http://maps.googleapis.com/maps/api/js'></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.js"></script>
<script src="https://rawgit.com/angular-ui/angular-google-maps/master/dist/angular-google-maps.js"></script>
<script src="http://rawgit.com/nmccready/angular-simple-logger/master/dist/angular-simple-logger.js"></script>
<div ng-app="mapsApp" ng-controller="MapCtrl">
    <ui-gmap-google-map center="map.center" zoom="map.zoom">
        <ui-gmap-markers models="markers" coords="'coords'" options="'options'" events="'events'" idkey="'_id'">
            <ui-gmap-windows show="show">
                 <div ng-non-bindable>
                    <div id="window">
                       <h4>{{name}}</h4>
                       <h5>{{latitude}}</h5> 
                       <h5>{{longitude}}</h5>
                    </div>  
                 </div>
             </ui-gmap-windows>
        </ui-gmap-marker>
        <ui-gmap-markers models="trips" coords="'coords'" options="'options'" events="'events'" idkey="'_id'">
        </ui-gmap-marker>
     </ui-gmap-google-map>   
</div>

Note: there's no reason to create multiple windows (ui-gmap-windows directive is intended for creating multiple instances of info windows) if you just want a single info window open at the time.

Angular Google 地图 - 显示来自两个数据模型的坐标

Angular Google Maps - Display coordinates from two data models

javascript

angularjs

google-maps

angular-google-maps