Как вы получаете данные из Police API и отображаете их на моей карте Google?

Question

Я новичок в обработке данных JSON и пытаюсь изучить их, получая данные из Police API и отображая их на моей карте Google.

По сути, я хочу получить пользовательский ввод, который получает геокодирование, а затем выполняет запрос к "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, который также использовался для создания функций для моих карт, и как мне это сделать?

Спасибо заранее,

Mark

Теперь я предоставил этот вопрос для решения

Answer 1

Я сделал это сейчас, используя свои контроллеры Spring MVC, чтобы получить необходимые данные JSON, а затем отобразил их на своей странице и на карте Google с помощью JQuery AJAX.

Вот мой контроллер, который получает JSONданные из Police API:

    @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;

    }
}

Вот часть моей страницы index.jsp, где я отображаю данные JSON на карте:

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

Вот часть моего индекса.Страница jsp, где я перебираю данные JSON, чтобы отобразить результаты в моем представлении, а также получить долготу и широту и отправить их в мою функцию, показанную выше (я понимаю, что это может выглядеть грязно, и может быть лучший способ сделать это, ноэто работает):

<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, после того, как я, наконец, понял, это было действительно очень просто:)

Answer 2

Строго говоря, вам не нужно , чтобы использовать cURL для использования этого веб-сервиса. Вы можете свернуть эти вызовы API в XMLHTTPRequest. Однако вы можете столкнуться с проблемами с междоменными XMLHTTPRequest s. Чтобы обойти это, вам потребуется написать сценарий, чтобы сервер мог выполнять эти запросы от имени вашего JavaScript, или вам нужно будет использовать предварительно созданный междоменный инструмент XHR для этого например flXHR или YQL . Использование инструмента, подобного этому, обрабатывает запрос и возвращает желаемый JSON.