Maps API不显示地图

-2

我使用以下代码在wamp www文件夹内的文件夹中显示json存档的各种点的地图。但是，结果是一个空白页面。Maps API不显示地图

的index.html

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="utf-8"> 
    <title>Marker Labels</title> 
    <style> 
     html, body { 
     height: 100%; 
     margin: 0; 
     padding: 0; 
     } 
     #map { 
     height: 100%; 
     } 
    </style> 
    <script src="https://maps.googleapis.com/maps/api/js?key=NUMBER OFMYKEY&signed_in=true"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
    <script src="app.js"> 
    <script> 
     google.maps.event.addDomListener(window, 'load', initialize); 
    </script> 
    </head> 
    <body> 
    <div id="map"></div> 
    </body> 
</html>

dados.json

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

app.js

function getLocal(callback){ 
    $.getJSON("localhost/dados/dados.json", callback); 
}; 

    function initialize() { 
    var myLatLng = new google.maps.LatLng(52.415524, 4.063066); 
    var mapOptions = { 
     zoom: 10, 
     center: myLatLng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 

    } 
    var map = new google.maps.Map(document.getElementById('map'),mapOptions); 

    getLocal(function(data){ 
    var locals = data.universities; 
    var local, latLng; 

    for(i in universities){ 
     local= universities[i]; 
     latLng = new google.maps.LatLng(local.lat, local.lng); 

     var marker = new google.maps.Marker({ 
     position: latLng, 
     label: "D", 
     map: map, 
     title: local.title 
     }); 
    } 
    }); 
}

UPDATE：

后续错误控制台：

jquery.min.js:4 XMLHttpRequest cannot load file:///C:/Users/noot01/Dropbox/Lucas%20Torres/Projetos/_teste/dengue/denge_teste2/localhost/dados/dados.json. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

来源

2016-05-15 Lucas Torres

你真的要在生产中使用file：//协议加载JSON吗？这就是每个错误消息都不能工作的原因。 – geocodezip

你错过截止</script>为<script src="app.js">

另外：在这行 2个错误：

mapTypeId: google.mapsp.mapTypeId.ROADMAP 
//--------------------^-^

应该

mapTypeId: google.maps.MapTypeId.ROADMAP

来源

2016-05-15 22:43:25

已修复！但仍然没有工作 –

是的男人，地图现在正在显示，但JSON存档与标记尚未 –

尝试分配宽度也

<style> 
    html, body { 
    height: 100%; 
    width:100%; 
    margin: 0; 
    padding: 0; 
    } 
    #map { 
    height: 100%; 
    width: 500px; 
    } 
</style>

来源

2016-05-15 22:34:50 scaisEdge

Maps API不显示地图

回答

相关问题