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

纬度/经度。在HTML中显示正常，但是如何拉/纬。来自** 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

返回值在Array中。应该是这样的....

certificateChain.ChainStatus

谢谢你们：）

从$ http angularjs中拉出特定值

3 个答案: