來自JSON數據的Google地圖標記 - 「無法加載資源」

我想從police.uk API（http://data.police.uk/docs/method/crime-street/）加載JSON數據並在Google地圖上繪製標記。但是，控制檯說它無法加載資源。任何人都可以發現我的錯誤？我附上我的代碼供您審查。謝謝。來自JSON數據的Google地圖標記 - 「無法加載資源」

<!DOCTYPE html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
<meta charset="utf-8"> 
<title>Geocoding service</title> 
<style> 
    html, body, #map-canvas { 
    height: 100%; 
    margin: 0px; 
    padding: 0px 
    } 
    #panel { 
    position: absolute; 
    top: 5px; 
    left: 50%; 
    margin-left: -180px; 
    z-index: 5; 
    background-color: #fff; 
    padding: 5px; 
    border: 1px solid #999; 
    } 
</style> 
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> 
<script src="jquery-1.10.2.min.js"></script> 
<script> 
    var map; 
    var latlng; 
//Getting the data from the API (http://data.police.uk/docs/method/crime-street/) 
function getJSONpoliceuk(callback){ 
$.getJSON('http://data.police.uk/api/crimes-street/all-crime? lat=51.5600&lng=1.7800&date=2013-01', callback) 
} 

//Initializing the map 
function initialize() { 
var coords = [51.5600, 1.7800] 
geocoder = new google.maps.Geocoder(); 
latlng = new google.maps.LatLng(51.5600, 1.7800); 
var mapOptions = { 
    zoom: 5, 
    center: latlng 
} 
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); 

var marker = new google.maps.Marker({ 
    position: latlng, 
    map:map, 
    title: 'home' 
}) 

getJSONpoliceuk(function(data){ 
    var crimes = data.crimess; 
    var crime, latLng 
    for(i in crimes) { 
     crime = crimes[i]; 
     latLng = new google.maps.LatLng(crime.latitude, crime.longitude); 
     var marker = new google.maps.Marker({ 
      position:latlng, 
      map:map, 
      title: crime.name 
     }) 
    } 
}) 
} 
</script> 
</head> 
<body onload="initialize()"> 
<div id="map-canvas" style="width: 320px; height: 480px;"></div> 
</body> 
</html>

來源

2014-01-16 Stelios Voskos

我不熟悉php。任何有關實施的建議？感謝您指出 –

我遵循本教程http://www.youtube.com/watch?v=7mkOVjRz3tg，它似乎爲他工作。如果你可以提到任何實現的想法，那將非常感激。歡呼 –

如果可能的話，您可以對php腳本進行ajax調用並使用file_get_contents獲取數據，然後json將其編碼在返回 –

使用該JSON調用

//Getting the data from the API (http://data.police.uk/docs/method/crime-street/) 
function getJSONpoliceuk(callback){ 
$.getJSON('http://data.police.uk/api/crimes-street/all-crime?poly=52.268,0.543:52.794,0.238:52.130,0.478&date=2013-01', callback) 
}

和下面的回調函數

getJSONpoliceuk(function(data) { 
    var crime, latLng; 

    for(i in data) { 
     crime = data[i]; 
     latLng = new google.maps.LatLng(parseFloat(crime.location.latitude), 
             parseFloat(crime.location.longitude)); 
     var marker = new google.maps.Marker({ 
      position: latLng, 
      map:  map, 
      title: crime.category 
     }); 
    } 
});

我得到了地圖上的標記。

困擾我的是我得到了運行wamp服務器上的html文件和普通客戶端的結果。

Example at jsBin

來源

2014-01-16 19:37:14

感謝您的信息。我設置了wamp並將其放入www文件夾中。還是行不通。還有其他的事情需要完成嗎？ –

我已經在jsBin中添加了示例。使用wamp服務器，我只需用'localhost'替換包含www目錄的路徑開頭。 –

來自JSON數據的Google地圖標記 - 「無法加載資源」

回答

相關問題