角谷歌地圖 - 顯示來自兩個數據模型的座標

Question

我正試圖在一個地圖視圖中加載兩個數據模型與角谷歌地圖。我可以加載一個數據模型來顯示，但無法顯示來自不同服務的第二組座標。任何幫助是極大的讚賞。以下是我的代碼。

<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指令缺少關閉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>

注：沒有任何理由來創建多個窗口（ui-gmap-windows 指令用於創建多個信息 窗口情況下），如果你只是想要一個單信息窗口的時候打開。