Question

我正在实施一个仪表板，它必须从police.uk API获取数据并在Google Maps上显示。对API的请求（指向API的链接：http://data.police.uk/docs/）是一个类似http://data.police.uk/api/crimes-street/all-crime?lat=52.629729&lng=-1.131592&date=2013-01的网址，响应是JSON数据，显示在Google地图上。在Stackoverflow上有类似的问题，但它们使用Spring MVC控制器。但是，我感兴趣的是如何获取这些数据并使用PHP在Google Maps上显示这些数据。有什么建议吗？我附上谷歌地图的代码。

var geocoder;
var map;
var latlng;
function initialize() {
geocoder = new google.maps.Geocoder();
latlng = new google.maps.LatLng(53.5500, 2.4333);
var mapOptions = {
  zoom: 9,
  center: latlng
}
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
}

var take;
function codeLatLong() {
var address = document.getElementById("address").value;
geocoder.geocode( { 'address': address}, function(results, status) {
  if (status == google.maps.GeocoderStatus.OK) {
    take = map.setCenter(results[0].geometry.location);
    var myCity = new google.maps.Circle({
       center: results[0].geometry.location,
       radius:20000,
       strokeColor:"#0000FF",
       strokeOpacity:0.8,
       strokeWeight:2,
       fillColor:"#0000FF",
       fillOpacity:0.4
    });

    myCity.setMap(map);


  } else {
    alert("Geocode was not successful for the following reason: " + status);
  }
});
}
//Calling the JSON data from the website with an example
$.getJSON( "http://data.police.uk/api/crimes-street/all-crime?lat=52.629729&lng=-1.131592&date=2013-01", function( data ) {
    var items = [];
    $.each( data, function( key, val ) {
    items.push( "<li id='" + key + "'>" + val + "</li>" );
});

$( "<ul/>", {
    "class": "my-new-list",
    html: items.join( "" )
}).appendTo( "body" );
});

HTML：

<body onload="initialize()">
<div id="map-canvas" style="width: 320px; height: 480px;"></div>
<div>
<input id="address" type="textbox" placeholder = "Enter address, or postcode">
<input type="button" value="Encode" onclick="codeLatLong()">
</div>
</body>

Answer 1

我已使用初始问题中的网址测试了您的代码。并获得预期的结果。这是我的测试片段。

$.getJSON( "http://data.police.uk/api/crimes-street/all-crime?lat=52.629729&lng=-1.131592&date=2013-01", function( data ) {
    var items = [];
    $.each( data, function( key, val ) {
    items.push( "<li id='" + key + "'>" + val.location.street.name + " (lat: " + val.location.latitude + ", long: " + val.location.longitude + ") </li>" );
});

$( "<ul/>", {
    "class": "my-new-list",
    html: items.join( "" )
}).appendTo( "body" );
});

在地图上显示标记非常简单。更多信息可以在here

找到

$.getJSON( "http://data.police.uk/api/crimes-street/all-crime?lat=52.629729&lng=-1.131592&date=2013-01", function( data ) {
    var items = [];
    $.each( data, function( key, val ) {

    var myLatlng = new google.maps.LatLng(val.location.latitude,val.location.longitude);
    var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title: val.location.street.name
    });
  });
});

使用PHP从Police.uk获取数据并将其显示在Google Map上

1 个答案: