检索地点 api 的 json

Retrieve json of place api

我搜索了整个上午如何从 google api 中检索我的 json 数据,但是在我看到很多问题之后我仍然无法弄清楚我是什么'必须要做。我想我对这一点感到困惑,所以如果你愿意投反对票,请至少给我一个评论或一些真正能帮助我的东西吗?

预期行为

我希望控制台日志或访问类似这样的东西

[
   {
      "restaurantName":"Bronco",
      "address":"39 Rue des Petites Écuries, 75010 Paris",
      "lat":48.8737815,
      "long":2.3501649,
      "ratings":[
         {
            "stars":4,
            "comment":"Great! But not many veggie options."
         },
         {
            "stars":5,
            "comment":"My favorite restaurant!"
         }
      ]
   },
   {
      "restaurantName":"Babalou",
      "address":"4 Rue Lamarck, 75018 Paris",
      "lat":48.8865035,
      "long":2.3442197,
      "ratings":[
         {
            "stars":5,
            "comment":"Tiny pizzeria next to Sacre Coeur!"
         },
         {
            "stars":3,
            "comment":"Meh, it was fine."
         }
      ]
   }
]

代码

这是我关于 gmap、自动完成和输入搜索的 javascript。

function initAutocomplete() {
        var map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -33.8688, lng: 151.2195},
          zoom: 13,
          mapTypeId: 'roadmap'
        });

        initialize();

        google.maps.event.addListener(map, 'rightclick', function(event) {
        placeMarker(event.latLng);
            console.log(event.latLng);
        });

        function placeMarker(location) {
            var marker = new google.maps.Marker({
                position: location, 
                map: map
            });
        }

        // Create the search box and link it to the UI element.
        var input = document.getElementById('pac-input');
        var searchBox = new google.maps.places.SearchBox(input);

        // Bias the SearchBox results towards current map's viewport.
        map.addListener('bounds_changed', function() {
          searchBox.setBounds(map.getBounds());
        });

        var markers = [];

        // Listen for the event fired when the user selects a prediction and retrieve    
        // more details for that place.
        searchBox.addListener('places_changed', function() {

            //check if the first sectin is already Up
            if(!sectionShow){
                $(".columnsContainer").fadeIn();
                sectionShow=true;
            }

            //automatic movements of the scroll
            document.querySelector('#map').scrollIntoView({ 
                behavior: 'smooth'         
            });

          var places = searchBox.getPlaces();  
          if (places.length == 0) {
            return;
          }

            review = [];
            //this jquery line delete the previous card if you start another research 
            $(".card-grid").parent().find('.card-wrap').remove();
          // Clear out the old markers.
          markers.forEach(function(marker) {
            marker.setMap(null);
          });
          markers = [];


          // For each place, get the icon, name and location.
          var bounds = new google.maps.LatLngBounds();
          places.forEach(function(place) {
            //hai aggiunto bounds, ricorda che stai cercando di passare le coordinate posto per posto.

            if (!place.geometry) {
              console.log("Returned place contains no geometry");
              return;
            }

              containerPlace=places;

            var photos = place.photos;
            if (!photos) {
            return;
            }

            var icon = {
              url: place.icon,
              size: new google.maps.Size(71, 71),
              origin: new google.maps.Point(0, 0),
              anchor: new google.maps.Point(17, 34),
              scaledSize: new google.maps.Size(25, 25)
            };

              // remember to make an object instead of these variables
              var photo = photos[0].getUrl({'maxWidth': 800, 'maxHeight': 900})
              var title = place.name;
              var rating = place.rating;
              var address = place.formatted_address;
              var idPlace = place.place_id;   

              console.log(idPlace);

              printCard(photo, title, rating, address, idPlace);
              initMap(idPlace, map);            

            if (place.geometry.viewport) {
              // Only geocodes have viewport.
              bounds.union(place.geometry.viewport);
            } else {
              bounds.extend(place.geometry.location);
            }
          });
          map.fitBounds(bounds);
        });
     infoWindow = new google.maps.InfoWindow;

        // GeoLocation from Here
        if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(function(position) {
            var pos = {
              lat: position.coords.latitude,
              lng: position.coords.longitude
            };

            $(".columnsContainer").fadeIn();
            document.querySelector('#map').scrollIntoView({ 
                behavior: 'smooth'         
            });

            infoWindow.setPosition(pos);
            infoWindow.setContent('You are here');
            infoWindow.open(map);
            map.setCenter(pos);
          }, function() {
            handleLocationError(true, infoWindow, map.getCenter());
          });
        } else {
          // Browser doesn't support Geolocation
          handleLocationError(false, infoWindow, map.getCenter());
        }

}

我的尝试

我尝试添加这行代码,但它不起作用

$.getJSON("https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=36.950030,14.537220&radius=500&type=restaurant&key=AIzaSyDWb4mliJPGjwsAhNvdDEveAd0dTe9KXxE&callback=?", function(data){
  console.log("Data: " + data);
});

我有这个控制台日志,上面有@markymark 的回答:

Access to XMLHttpRequest at from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource

对我有帮助的问题

codepen

Codepen Here

所以我在 this question

中了解了 CORS

这是您的 URL 修复,您的回调仍然来自 javascript API。您可以使用简单的 URL 获取那些。您可以将其粘贴到浏览器中并查看结果。

https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=36.950030,14.537220&radius=500&type=restaurant&key=AIzaSyDWb4mliJPGjwsAhNvdDEveAd0dTe9KXxE

SF 附近图书馆的示例

https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=37.7749,-122.4194&radius=1000&type=library&key=AIzaSyDWb4mliJPGjwsAhNvdDEveAd0dTe9KXxE

请记得删除您的 API 密钥。这些是你的钥匙。