從$ http提取特定值angularjs

Web API已連接並正常工作，正確提取並顯示數據。現在需要通過API與具體的協調來顯示地圖（地圖盒）

function frmccode() { 
    var path_cc = api + vm.ccode; 

    $http({ 
    method: 'GET', 
    url: path_cc, 
    headers: { 
     'Authorization': 'Bearer ' + bearer.token 
    } 
    }).then(function(resp) { 
    $scope.itemsc = resp.data; 
    }).catch(function(err) { 
    $scope.err = err.status; 
    if ($scope.err === 404) { 
     $scope.ccerror = err.status; 
    } 
    }); 
} 

var map = new mapboxgl.Map({ 
    zoom: 6, 
    center: [54, 24], 
    container: 'map', 
    style: 'http://abcd.com/api/gis/style', 
});

HTML

<table class="table"> 
    <tbody ng-repeat="item in itemsc"> 
     <tr> 
     <div id="map" style="height: 300px; width: 100%;"></div> 
     </tr> 
     <tr> 
     <th>GPS</th> 
     <td>Latitude: {{item.latitude}} | Longitude: {{item.longitude}}</td> 
     </tr> 
    </tbody> 
    </table>

網絡API

"latitude": {}, 
"longitude": {}

緯/長。在HTML中顯示得很好，但是如何拉動經緯度。從** resp.data *並傳遞它在地圖功能？

來源

2017-02-20 faisal

向上移動你的'VAR地圖= ...'語句轉換成'then'回調。在那裏，你的數據是可用的 – Phil

@菲爾，是的，但我沒有得到如何捕捉物品的價值，即** $ scope.itemsc.latitude **？ – faisal

返回值在Array中。應該是這樣的....

var lat = resp.data[0].latitude;

謝謝你們:)

來源

2017-02-20 08:00:42 faisal

我會將地圖變成指令。喜歡的東西：

myDirectives.directive('myMap', function() { 
    return { 
     restrict: 'A', 
     scope: { lat: '=', long: '='}, 
     link: function (scope, element, attrs) { 
     //lat long available here (2 way binding) 
     var map = new mapboxgl.Map({ 
      zoom: 6, 
      center: [54, 24], 
      container: attrs.container, 
      style: 'http://abcd.com/api/gis/style', 
     }); 

     } 
    }; 
    });

而且你可以使用它像這樣

<table class="table"> 
    <tbody ng-repeat="item in itemsc"> 
     <tr> 
     <div my-map id="map" container="map" lat="item.latitude" long="item.longitude" style="height: 300px; width: 100%;"></div> 
     </tr> 
     <tr> 
     <th>GPS</th> 
     <td>Latitude: {{item.latitude}} | Longitude: {{item.longitude}}</td> 
     </tr> 
    </tbody> 
    </table>

來源

2017-02-20 06:18:50 garethb

嘗試它裏面回調函數。循環通過項目c，

var el = document.createElement('div'); 
el.className = 'marker'; 
el.style.backgroundImage = 'url(' + img_url + ')'; 


new mapboxgl.Marker(el) 
    .setLngLat([item.lng, item.lat]) 
    .addTo(map);

來源

2017-02-20 06:18:54

從$ http提取特定值angularjs

回答

相關問題