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

Question

I am trying to load JSON data from the police.uk API ( http://data.police.uk/docs/method/crime-street/ ) and plot the markers on the google map. 我正在尝试从Police.uk API（ http://data.police.uk/docs/method/crime-street/ ）加载JSON数据，并在Google地图上绘制标记。 However, the console says that it fails to load the resource. 但是，控制台说它无法加载资源。 Can anyone spot where my mistake? 谁能发现我的错误所在？ I enclose my code for your review. 随函附上我的代码供您审核。 Thanks. 谢谢。

<!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

Using this JSON call 使用此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)
}

and following callback function 和以下回调函数

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
        });
    }
});

I got markers on the map. 我在地图上有标记。

What is bothering me is I got the result running the html file on wamp server and as plain client. 困扰我的是我得到的结果是在wamp服务器和纯客户端上运行html文件。

Example at jsBin jsBin的示例

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

问题描述

1 个解决方案

解决方案1
1 已采纳 2014-01-16 19:37:14

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2014-01-16 19:37:14

解决方案1
1 已采纳 2014-01-16 19:37:14