Question

我尝试使用JSON文件加载标记（取消注释您的注释代码），但我没有取得任何成功。它正在使用javascript中硬编码的标记，但在读取文件时却没有。

无法加载资源：No＆＃39; Access-Control-Allow-Origin＆＃39;标头出现在请求的资源上。起源＆＃39; null＆＃39;因此不允许访问。文件：/// C：/Users/dacosts/workspace/mappingdash/universities.json

有什么想法吗？

var map;
var icon = "http://path/to/icon.png";
//var json = "http://path/to/universities.json";
var json = "universities.json";
var infowindow = new google.maps.InfoWindow();
function initialize() {

    var mapProp = {
        center : new google.maps.LatLng(52.4550, -3.3833), //LLANDRINDOD WELLS
        zoom : 7,
        mapTypeId : google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById("map"), mapProp);

    $.getJSON("universities.json", function(json1) {

        /*var json1 = {
            "universities": [
                {
                    "title": "Aberystwyth University",
                    "website": "www.aber.ac.uk",
                    "phone": "+44 (0)1970 623 111",
                    "lat": 52.415524,
                    "lng": -4.063066},
                {
                    "title": "Bangor University",
                    "website": "www.bangor.ac.uk",
                    "phone": "+44 (0)1248 351 151",
                    "lat": 53.229520,
                    "lng": -4.129987},
                {
                    "title": "Cardiff Metropolitan University",
                    "website": "www.cardiffmet.ac.uk",
                    "phone": "+44 (0)2920 416 138",
                    "lat": 51.482708,
                    "lng": -3.165881}
            ]
        };*/
        $.each(json1.universities, function(key, data) {

            var latLng = new google.maps.LatLng(data.lat, data.lng);

            var marker = new google.maps.Marker({
                position : latLng,
                map : map,
                // icon: icon,
                title : data.title
            }
        );

            var details = data.website + ", " + data.phone + ".";

            bindInfoWindow(marker, map, infowindow, details);

        }
    );

    });

}

function bindInfoWindow(marker, map, infowindow, strDescription) {
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(strDescription);
        infowindow.open(map, marker);
    });
}
google.maps.event.addDomListener(window, 'load', initialize);

这是数据

universities: [
      {  
         "title":"Aberystwyth University",
         "website":"www.aber.ac.uk",
         "phone":"+44 (0)1970 623 111",
         "lat":52.415524,
         "lng":-4.063066
      },
      {  
         "title":"Bangor University",
         "website":"www.bangor.ac.uk",
         "phone":"+44 (0)1248 351 151",
         "lat":53.229520,
         "lng":-4.129987
      },
      {  
         "title":"Cardiff Metropolitan University",
         "website":"www.cardiffmet.ac.uk",
         "phone":"+44 (0)2920 416 138",
         "lat":51.482708,
         "lng":-3.165881
      }
]

Answer 1

我猜你正在使用Chrome。它对本地资源的AJAX请求有限制。

如果您想在没有任何服务器的情况下继续测试，则需要使用不同的浏览器，例如Firefox。

您还可以设置临时http服务器以进行开发，并使用它来访问您的网站。

Chrome有一种可能的解决方法：您需要使用标记--allow-file-access-from-files启动它。确保您仅将其用于开发目的，以避免安全风险。

值得一读

Answer 2

是的我正在使用Chrome，我只能访问IE 9或Chrome 31.0.1650.63。有解决方法吗？要么是浏览器？

无访问控制允许原始标头

2 个答案: