Question

我正在尝试从police.uk API（http://data.police.uk/docs/method/crime-street/）加载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>

Answer 1

使用此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

来自JSON数据的Google地图标记 - “无法加载资源”

1 个答案: