Javascript 使用PHP从Police.uk获取数据并显示在Google地图上_Javascript_Google Maps

Javascript 使用PHP从Police.uk获取数据并显示在Google地图上

javascript google-maps

Javascript 使用PHP从Police.uk获取数据并显示在Google地图上,javascript,google-maps,Javascript,Google Maps,我正在实现一个仪表板，它必须从police.uk API获取数据，并在谷歌地图上显示这些数据。对API的请求链接到API:是类似URL的，响应是JSON数据，显示在Google地图上。Stackoverflow上也有类似的问题，但它们使用SpringMVC控制器。然而，我感兴趣的是如何获得这些数据并用PHP在Google地图上显示它们。有什么建议吗？我附上我的谷歌地图代码 var geocoder; var map; var latlng; function initialize() { ge

我正在实现一个仪表板，它必须从police.uk API获取数据，并在谷歌地图上显示这些数据。对API的请求链接到API:是类似URL的，响应是JSON数据，显示在Google地图上。Stackoverflow上也有类似的问题，但它们使用SpringMVC控制器。然而，我感兴趣的是如何获得这些数据并用PHP在Google地图上显示它们。有什么建议吗？我附上我的谷歌地图代码

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>

我已经用最初问题中的URL测试了您的代码。并取得预期的效果。这是我的测试片段

$.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" );
});

为什么不直接从javascipt请求json数据？如果您使用PHP脚本获取数据，您仍然需要将其发送回绘制地图的javascript代码。让我看看我能不能用这个做点什么。谢谢还是没什么。我使用了.getJSON方法来显示数据，但没有得到任何反馈。如果你能看到我的编辑和张贴你的建议，那将不胜感激。干杯。是的，这对我也有用。我搞不懂的是如何在地图上显示它们。再次感谢你的帮助。

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