从 $http angularjs 中提取特定值

Question

Web API 已连接并且工作正常，可以正确获取和显示数据。现在需要通过API

显示特定坐标的地图（地图框）

JS

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": {}

Lat/Long。在 HTML 中表现良好但怎么能拉lat/long。来自 **resp.data* 并在地图函数中传递它？

Answer 1

我会把地图变成指令。类似于：

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>

Answer 2

在函数回调中尝试。遍历 itemsc,

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

Answer 3

return 值在数组中。应该是这样....

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

谢谢大家:)

从 $http angularjs 中提取特定值

Pull specific value from $http angularjs

angularjs

mapbox-gl