将远程 api json 数据显示到谷歌地图中

Posted 2023-02-15

【中文标题】将远程 api json 数据显示到谷歌地图中

【英文标题】：Display remote api json data into google maps

【发布时间】：2021-11-03 10:45:51

【问题描述】：

我正在尝试将远程 api json 显示到谷歌地图中。目前的 代码与位于同一脚本中的 localjson 一起使用，但是我 想用远程 api json 填充谷歌地图。我正在使用 Angularjs 谷歌地图集成。当引用与谷歌地图实现相同的脚本中的 json 时，该代码可以完美运行。但现在我想用来自本地以外的另一个来源（远程 json）的 json 填充谷歌地图。 请指教。请参阅下面的代码以获取更多信息 我尝试在 for 循环中调用 testData，但出现错误： “未定义testData”，但据我了解，它是在我的脚本顶部定义的“points.testData = [];

---

  var points = this;
  points.testData = [];

  $http(
    method: 'GET',
    url: 'https://api.jsonbin.io/b/61361f26dfe0cf16eb55fd9f',
  )

  .then(function successCallback(response) 
        console.log("success, ",response);
        $scope.testData = response.data;

    , function errorCallback(response) 
      console.log("failure, ",response);.
    );


  // GOOGLE MAPS CODE
  $scope.highlighters = [];
  $scope.gMap = null;

  var winInfo = new google.maps.InfoWindow();

  var googleMapOption = 
    zoom: 2,
    center: new google.maps.LatLng(2.8, -187.3),
    mapTypeId: google.maps.MapTypeId.TERRAIN
  ;


  $scope.gMap = new google.maps.Map(document.getElementById('googleMap'), googleMapOption);

  var createHighlighter = function(citi) 

    var citiesInfo = new google.maps.Marker(
      map: $scope.gMap,
      position: new google.maps.LatLng(citi.attributes.coordinates.lat, citi.attributes.coordinates.lng),
      title: citi.attributes.name
    );

    citiesInfo.content = '<div>' + citi.attributes.address1 + '</div>' +
    '<div>' + citi.attributes.openingHours + '</div>';

    google.maps.event.addListener(citiesInfo, 'click', function() 
      winInfo.setContent('<h1>' + citiesInfo.title + '</h1>' + citiesInfo.content);
      winInfo.open($scope.gMap, citiesInfo);
    );
    $scope.highlighters.push(citiesInfo);
  ;

  for (var i = 0; i < testData.length; i++) 
    createHighlighter(testData[i]);
  

这是我的 json 文件

var cities = [
          "attributes": 
              "name": "Test1",
              "city": "Mthatha",
              "address1": "Cnr Sisson and Sutherland Road",
              "coordinates": 
                  "lng": 28.7648433,
                  "lat": -31.5805384
              ,
              "openingHours": "Mon-Fri: 8am-6pm, Sat-Sun: 8am-5pm"
          ,
             "attributes": 
              "name": "Test2",
              "city": "Mthatha",
              "address1": "Cnr Sisson and Sutherland Road",
              "coordinates": 
                  "lng": 28.7648433,
                  "lat": -31.5805384
              ,
              "openingHours": "Mon-Fri: 8am-6pm, Sat-Sun: 8am-5pm"
          ];

【问题讨论】：

你尝试了什么/什么没用？请阅读How to Ask。您的问题太模糊，需要详细说明。

我尝试在 for 循环中调用 testData 以循环遍历我的 json 数据，但出现错误：“testData is not defined”，但据我了解，它是在顶部定义的我的脚本“points.testData = []; 所以我想从外部 json 中提取 testData 但它不起作用

“它不工作”不是正确的问题描述。 什么不起作用？如果从外部 URL 加载文件失败，那么您应该调试/检查浏览器的 javascript 控制台是否存在相关错误等，并将其与您的问题一起提供。现在，您共享的代码中的 URL 是本地的 (url: 'data/data.json')。请更新您的问题。

我已经更新了网址。我能够从控制台上的远程 json 取回结果。我想将远程数据显示到谷歌地图中，​​但我在控制台上收到错误（未定义 testData），并且该错误来自我代码中的 forLoop。我不确定我在这里缺少什么。尽管使用本地 json，GoogleMaps 工作正常，但从外部 url 拉取时我无法让它工作。

如果您在 for 循环之前尝试 console.log(testData) 会发生什么？您正在将 API 响应添加到 $scope.testData。

【参考方案1】：

我不得不在 .thenFunction() 中移动 for 循环，问题就解决了。

感谢你们所有的cmets。

【讨论】：

请添加更多详细信息以扩展您的答案，例如工作代码或文档引用。