javascript - 您如何从 Police API 获取数据并将其显示在我的 Google map 上？

Question

我是处理 JSON 数据的新手，我正在尝试通过从 Police API 获取数据来学习它并将其显示在我的 Google map 上。

基本上，我想接受一个经过地理编码的用户输入，然后向“http://policeapi2.rkh.co.uk/api/crimes-street/all-crime?lat=52.629729&lng=- 1.131592"(纬度和经度是地理编码地址)。

我一直在搜索，但任何似乎使用 cURL(这是他们在其网站上建议的)的东西都与 PHP 有关。 richardalan.co.uk 上有一个很好的例子，但我一生中从未使用过 PHP，我使用的技术是 Spring MVC、Google App Engine、Google Maps(JavaScript)。

我只想知道我是否可以在我的 JavaScript 中执行此操作，该 JavaScript 也已用于为我的 map 创建函数，我该怎么做？

先谢谢你，

标记

我现在已经为这个问题提供了解决方案

Answer 1

我现在已经使用我的 Spring MVC Controller 获取我需要的 JSON 数据，然后使用 JQuery AJAX 将其显示在我的页面和 Google map 上。

这是我的 Controller ，它从 Police API 获取 JSON 数据:

    @Controller
public class CrimeRESTController {


    @RequestMapping(value = "/crimes", method = RequestMethod.GET)
    public @ResponseBody Object jsonCrimes(){

            SimpleClientHttpRequestFactory s = new SimpleClientHttpRequestFactory() {
            @Override
            protected void prepareConnection(HttpURLConnection connection, String httpMethod) throws IOException {
                super.prepareConnection(connection, httpMethod);

                //Basic Authentication for Police API
                String authorisation = "username" + ":" + "password";
                byte[] encodedAuthorisation = Base64.encode(authorisation.getBytes());
                connection.setRequestProperty("Authorization", "Basic " + new String(encodedAuthorisation));
            }
        };


        RestTemplate rt = new RestTemplate(s);


        Object crime;
        crime = rt.getForObject("http://policeapi2.rkh.co.uk/api/crimes-street/all-crime?lat=53.4107766&lng=-2.9778383", Object.class);

        return crime;

    }
}

这是我在 map 上显示 JSON 数据的 index.jsp 页面的一部分:

    <script>                
           <%---------------------------------------------------%>
           <%---------CODE THE LAT LONG IN INPUT FIELD----------%>
           <%---------------------------------------------------%>
           function codeLatLng(latitude, longitude){

               var latlng = new google.maps.LatLng(latitude, longitude);

                         marker = new google.maps.Marker({
                             position: latlng,
                             map: map
                         });
           }
           <%---------------------------------------------------%>
    </script>

这是我的 index.jsp 页面的一部分，我在其中循环遍历 JSON 数据以将结果显示到我的 View 中，还获取经度和纬度并将其发送到上面显示的我的函数(我知道这可能看起来很乱而且那里可能是更好的方法，但它确实有效):

<script type="text/javascript">
            function displayCrimesOnMap() {
                $.getJSON("crimes.htm", function(data) {
                   $('#crimes').text('');
                   $.each(data, function(key, value) {
                       $('#crimes').append('<br>');
                       $.each(value, function(newKey, newValue){
                           if(newKey == "location"){
                               var latitude;
                                var longitude;
                               $.each(newValue, function(key2, value2){
                                if(key2 == "latitude"){

                                    latitude = value2;
                                }
                                if(key2 == "longitude"){

                                    longitude = value2;
                                }
                                if(key2 == "street"){
                                   $('#crimes').append('<p class="areatext">' + '<b>'+key2+'</b>' + '</p>');
                                      $.each(value2, function(key3, value3){
                                           $('#crimes').append('<p class="areatext">' + '<b>'+key3+'</b>' +": " + value3 + '</p>');
                                      })
                                }else{
                                    $('#crimes').append('<p class="areatext">' + '<b>'+key2+'</b>' +": " + value2 + '</p>');
                                }

                               })
                               //alert(latitude+", "+longitude);
                               codeLatLng(latitude,longitude);
                           }else{
                                $('#crimes').append('<p class="areatext">' + '<b>'+newKey+'</b>' +": " + newValue + '</p>');
                           }
                       })
                    })
                });
            }
        </script>

这是我的 index.jsp 页面的一部分，其中信息输出到 index.jsp 中的特定部分:

<h1 class="areatitle">Crimes...   <input type="button" value="Get Crimes" onclick="displayCrimesOnMap()"/></h1>
                       <div id="crimes">
                       <!--Crimes Appears Here-->
                       </div>

我真的希望这对我以外的人有帮助，因为我发现我很难理解 AJAX，在我终于理解它之后，它实际上真的很容易:)