从外部来源调用json文件 [英] Calling json file from external sources

问题描述

我用这个JavaScript从外部来源调用我的JSON数据。 json数据将从服务器加载。那么，我可以使用外部JSON数据从Google地图获取标记的脚本是什么。

  var map，infowindow; ////// JSON datavar json =http://www.tripleclickstudio.com/json/file.json$ .getJSON（json，{tags：location，tagmode：any，format： json}）function initialize（）{//给出map som选项var mapOptions = {////}; //创建地图map = new google.maps.Map（document.getElementById（'map-canvas'），mapOptions）; var bounds = new google.maps.LatLngBounds（）; //// //循环遍历JSON数据中的所有条目var responses = json [0] .ResponseData; //// for（var i = 0; i< responses.length; i ++）{//// //当前对象var obj = responses [i]; //// //为对象添加一个新的标记var position = new google.maps.LatLng（obj.CoordinateY，obj.CoordinateX）; //// bounds.extend（position）; //// var marker = new google.maps.Marker（{position：position，//// map：map，draggable：true，animation：google.maps.Animation.DROP，title：obj.BuildingName}）; //为对象添加一个新的信息窗口var clicker = addClicker（marker，obj.BuildingName）; ////} //结束循环map.fitBounds（bounds）; //标记，'click'，函数（）{if（infowindow）{infowindow.close（） ）;} infowindow = new google.maps.InfoWindow（{content：content}）; infowindow.open（map，marker）;}）; }} //初始化mapgoogle.maps.event.addDomListener（window，'load'，initialize）;  

 < script type =text / javascriptsrc =https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true >< /脚本> < script src =https:////cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js>< / script> < div id =map-canvas>< / div>  

但输出结果只是空白页。但是如果我使用JSON数据到这个文件中，这是完美的。

解决方案

我在代码片段中得到两个javascript错误： / p>

1. XMLHttpRequest无法载入http://www.tripleclickstudio.com/json/file.json?tags =位置&安培; tagmode =任何&安培;格式= JSON。请求的资源上没有Access-Control-Allow-Origin标题。因此不允许原产地'null'访问。




$ b

   >  for（var i = 0; i< responses.length; i ++）{
  

因为运行循环时响应不存在。 $ .getJSON是异步的，直到回调函数运行（您尚未定义）才会填充数据。然而，你的第一个问题是，有一个安全策略阻止你使用$ .getJSON来下载它。您需要获得许可才能为您的域名下载（在标题中为适当的 Access-Control-Allow-Origin ）或通过JSONP下载。





但是，当我这样做时，我的JSON中出现语法错误。




I used this JavaScript to call my JSON data from an external source. The json data will load from server. So, what will be the script that I can get the markers from google map using the external JSON data.

 var map, infowindow; ////

// The JSON data
var json = "http://www.tripleclickstudio.com/json/file.json"
$.getJSON(json,{
    tags:"location",
    tagmode:"any",
    format:"json"
    
})

function initialize() {
  
  // Giving the map som options
  var mapOptions = {
    ////
  };
  
  // Creating the map
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  
  var bounds = new google.maps.LatLngBounds(); ////
  
  // Looping through all the entries from the JSON data
  var responses = json[0].ResponseData; ////
  for(var i = 0; i < responses.length; i++) { ////
    
    // Current object
    var obj = responses[i]; ////

    // Adding a new marker for the object
    var position =
      new google.maps.LatLng( obj.CoordinateY, obj.CoordinateX ); ////
    bounds.extend( position ); ////
    var marker = new google.maps.Marker({
      position: position, ////
      map: map,
      draggable: true,
      animation: google.maps.Animation.DROP,
      title: obj.BuildingName
    });
    
    // Adding a new info window for the object
    var clicker = addClicker(marker, obj.BuildingName); ////

  } // end loop
  
  map.fitBounds( bounds ); ////
  
  // Adding a new click event listener for the object
  function addClicker(marker, content) {
    google.maps.event.addListener(marker, 'click', function() {
      
      if (infowindow) {infowindow.close();}
      infowindow = new google.maps.InfoWindow({content: content});
      infowindow.open(map, marker);
      
    });
  }
  
}

// Initialize the map
google.maps.event.addDomListener(window, 'load', initialize);

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>
   <script src="https:////cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <div id="map-canvas"></div>

But the output is noting but a blank page. but if I use the JSON data into the file this works perfectly.

解决方案

I get two javascript errors in your code snippet:

1. XMLHttpRequest cannot load http://www.tripleclickstudio.com/json/file.json?tags=location&tagmode=any&format=json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

2. Uncaught TypeError: Cannot read property 'length' of undefined on this line:

for(var i = 0; i < responses.length; i++) {  

Because responses doesn't exist when you are running the loop. $.getJSON is asynchronous, the data isn't populated until the callback function is run (which you haven't defined). Your first problem, however, is that there is a security policy preventing you from downloading it with $.getJSON. You either need to get permission to download it for your domain (the appropriate Access-Control-Allow-Origin in the header) or to download it via JSONP.

However, when I do that, I get a syntax error in your JSON.

这篇关于从外部来源调用json文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！