检索地点 api 的 json

Posted 2023-03-03

【中文标题】检索地点 api 的 json

【英文标题】：Retrieve json of place api

【发布时间】：2019-03-21 22:10:27

【问题描述】：

我整个早上都在搜索如何从 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 答案的控制台日志：

从源“null”访问 XMLHttpRequest 已被阻止 CORS 策略：没有“Access-Control-Allow-Origin”标头出现在 请求的资源

对我有帮助的问题

Getting JSON of Google Places Nearby Search How to capture and parse JSON returned from Google Maps v3 API?（这真的很有趣） https://developers.google.com/places/web-service/search

codepen

Codepen Here

所以我在 this question 中读到了 CORS

【问题讨论】：

“不起作用”不是错误或问题陈述。到目前为止，您的问题很好，但您还需要准确解释您看到的行为而不是您的预期。如果还没有，请检查浏览器的控制台和网络选项卡是否有错误。使用调试器单步执行您的代码并检查变量值和代码所采用的路径，以了解实际发生的情况。

是的，我会尽快更正，我在控制台上收到此错误“CORS 策略已阻止从源‘null’访问 XMLHttpRequest：没有‘Access-Control-Allow-Origin’标头存在于请求的资源上”。

好的，谢谢。请阅读***.com/questions/12052483/…。该错误是因为您需要在适当的网络服务器中执行您的页面（即通过http:// 或https://，而不是file:// 协议）。

您可以使用 Apache 或 IIS（取决于您的操作系统）在您的机器上轻松安装网络服务器，如果您在线搜索，还有其他产品，可能更容易设置。

感谢您的所有回答，因此可以正确地说，如果在 http 或 https 上上传并且我使用 $.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); ); 它将控制台记录所有 json 数据，对吗？

【参考方案1】：

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

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

旧金山附近图书馆的一个例子

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

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

【讨论】：

如果我在 .getJson 中使用此代码，它会给我错误 Access to XMLHttpRequest at 'maps.googleapis.com/maps/api/place/nearbysearch/…' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow -Origin' 标头存在于请求的资源上。

您能使用 JavaScript 地点 API 代替传递 URL吗？为了避免CORS问题。这是文档中的一个示例，developers.google.com/maps/documentation/javascript/places 如果您需要更多帮助，请告诉我