Cách lấy ảnh của một địa điểm từ bản đồ google hoặc địa điểm API

Question

Tôi đang sử dụng Google Places API để truy xuất dữ liệu về địa điểm, nhưng không thể tìm thấy cách chụp ảnh địa điểm đó, Google Places API chỉ cung cấp biểu tượng không phải là tương tự. Tôi cần ảnh bạn nhận được khi bạn tìm kiếm địa điểm trong Google Maps trong trình duyệt web chẳng hạn. Thường có nhiều hình ảnh hơn từ Panoramio, nhưng Panoramio API chỉ có thể tìm kiếm ảnh theo vị trí chứ không phải bởi một tên nhà hàng hoặc tên khách sạn cụ thể. Bất kỳ ý tưởng?

Answer 1

API địa điểm sẽ cung cấp cho bạn tọa độ (vĩ độ và kinh độ) trong place detail response; sau đó bạn có thể gửi tọa độ đến Panoramio API.

Ví dụ (rút ra từ các ví dụ trong các tài liệu API):

https://maps.googleapis.com/maps/api/place/details/json?reference=<big long key for place>&sensor=true&key=AIzaSyAiFpFd85eMtfbvmVNEYuNds5TEF9FjIPI

đáp ứng:

{ 
    "html_attributions" : [], 
    "result" : { 
    "address_components" : [ 
     { 
     "long_name" : "48", 
     "short_name" : "48", 
     "types" : [ "street_number" ] 
     }, 
     { 
     "long_name" : "Pirrama Road", 
     "short_name" : "Pirrama Road", 
     "types" : [ "route" ] 
     }, 
     { 
     "long_name" : "Pyrmont", 
     "short_name" : "Pyrmont", 
     "types" : [ "locality", "political" ] 
     }, 
     { 
     "long_name" : "NSW", 
     "short_name" : "NSW", 
     "types" : [ "administrative_area_level_1", "political" ] 
     }, 
     { 
     "long_name" : "AU", 
     "short_name" : "AU", 
     "types" : [ "country", "political" ] 
     }, 
     { 
     "long_name" : "2009", 
     "short_name" : "2009", 
     "types" : [ "postal_code" ] 
     } 
    ], 
    "formatted_address" : "5/48 Pirrama Road, Pyrmont NSW, Australia", 
    "formatted_phone_number" : "(02) 9374 4000", 
    "geometry" : { 
     "location" : { 
     "lat" : -33.8669710, 
     "lng" : 151.1958750 
     } 
    }, 
    "icon" : "http://maps.gstatic.com/mapfiles/place_api/icons/generic_business-71.png", 
    "id" : "4f89212bf76dde31f092cfc14d7506555d85b5c7", 
    "international_phone_number" : "+61 2 9374 4000", 
    "name" : "Google Sydney", 
    "rating" : 4.60, 
    "reference" : "CnRlAAAAAfV6JIqSzL8Cf4VnXn0EaI1d5k3IPhdkEonq0MxiUbQFFSVuptVbXbNH4mrevb0bc7G8yWqTUv76i4KTuO_Wf3OrRHjCJJwzQ0mNLjbYGSVqy2eqyrgOUkl6S_sJfTbHzWZYrfPy7KZaet0mM5S6thIQJYuy5v_JD--ZxXEJLWTQRRoU5UaciXBBo89K-bce18Ii9RsEIws", 
    "types" : [ "store", "establishment" ], 
    "url" : "http://maps.google.com/maps/place?cid=10281119596374313554", 
    "vicinity" : "5/48 Pirrama Road, Pyrmont", 
    "website" : "http://www.google.com.au/" 
    }, 
    "status" : "OK" 
} 

Chúng ta có thể thấy rằng các tọa độ là "location": { "lat": -33.8669710, "lng": 151.1958750 }

Sau đó, chúng tôi có thể gửi yêu cầu đến Panoramio, chèn tọa độ, cộng với một căn phòng nhỏ ở hai bên (tôi đã +/- 0,002 độ, hình dạng 200 m x 200 m vuông tại đường xích đạo, thường nhỏ hơn). http://www.panoramio.com/map/get_panoramas.php?set=public&from=0&to=20&minx=-33.868&miny=151.193&maxx=-33.864&maxy=151.197&size=medium&mapfilter=true

Bạn có thể cần phải lọc một số câu trả lời để có được bức ảnh gần nhất, nhưng điều này sẽ giúp bạn làm việc gì đó.

Answer 2

API Địa chỉ thêm khả năng để yêu cầu ảnh trực tiếp trong API: https://developers.google.com/maps/documentation/javascript/places#places_photos

Answer 3

API Địa điểm bây giờ hỗ trợ sự trở lại của một nơi ảnh nếu khả dụng cho một Place Search request và tối đa mười nơi ảnh cho một Place Details request.

Nếu một mảng ảnh được trả về với yêu cầu của bạn, bạn có thể vượt qua photo_reference từ một đối tượng ảnh chứa một Place Photo request với maxheight và/hoặc maxwidth, sensor và key thông số:

https://maps.googleapis.com/maps/api/place/photo?maxwidth=400&photoreference=CnRvAAAAwMpdHeWlXl-lH0vp7lez4znKPIWSWvgvZFISdKx45AwJVP1Qp37YOrH7sqHMJ8C-vBDC546decipPHchJhHZL94RcTUfPa1jWzo-rSHaTlbNtjh-N68RkcToUCuY9v2HNpo5mziqkir37WU8FJEqVBIQ4k938TI3e7bf8xq-uwDZcxoUbO_ZJzPxremiQurAYzCTwRhE_V0&sensor=false&key=AddYourOwnKeyHere 

Xin xem documentation để biết thêm chi tiết.

Answer 4

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="utf-8"> 
    <title>Places Searchbox</title> 
    <style> 
     /* Always set the map height explicitly to define the size of the div 
     * element that contains the map. */ 
     #map { 
     height: 50%; 
     } 
     /* Optional: Makes the sample page fill the window. */ 
     html, body { 
     height: 100%; 
     margin: 0; 
     padding: 0; 
     } 
     #description { 
     font-family: Roboto; 
     font-size: 15px; 
     font-weight: 300; 
     } 

     #infowindow-content .title { 
     font-weight: bold; 
     } 

     #infowindow-content { 
     display: none; 
     } 

     #map #infowindow-content { 
     display: inline; 
     } 

     .pac-card { 
     margin: 10px 10px 0 0; 
     border-radius: 2px 0 0 2px; 
     box-sizing: border-box; 
     -moz-box-sizing: border-box; 
     outline: none; 
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); 
     background-color: #fff; 
     font-family: Roboto; 
     } 

     #pac-container { 
     padding-bottom: 12px; 
     margin-right: 12px; 
     } 

     .pac-controls { 
     display: inline-block; 
     padding: 5px 11px; 
     } 

     .pac-controls label { 
     font-family: Roboto; 
     font-size: 13px; 
     font-weight: 300; 
     } 

     #pac-input { 
     background-color: #fff; 
     font-family: Roboto; 
     font-size: 15px; 
     font-weight: 300; 
     margin-left: 12px; 
     padding: 0 11px 0 13px; 
     text-overflow: ellipsis; 
     width: 400px; 
     } 

     #pac-input:focus { 
     border-color: #4d90fe; 
     } 

     #title { 
     color: #fff; 
     background-color: #4d90fe; 
     font-size: 25px; 
     font-weight: 500; 
     padding: 6px 12px; 
     } 
     #target { 
     width: 345px; 
     } 
    </style> 
    </head> 
    <body> 
    <input id="pac-input" class="controls" type="text" placeholder="Search Box"> 
    <div id="map"></div> 
    <div id="place-list"></div> 
    <script> 
     // This example adds a search box to a map, using the Google Place Autocomplete 
     // feature. People can enter geographical searches. The search box will return a 
     // pick list containing a mix of places and predicted search terms. 

     // This example requires the Places library. Include the libraries=places 
     // parameter when you first load the API. For example: 
     // <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"> 

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

     // 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); 
     map.controls[google.maps.ControlPosition.TOP_LEFT].push(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() { 
      var places = searchBox.getPlaces(); 

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

      // 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) { 
      if (!place.geometry) { 
       console.log("Returned place contains no geometry"); 
       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) 
      }; 

      var photoUrl = place.photos[0].getUrl({maxWidth: 400, maxHeight: 400}); 
      var img = document.createElement("img"); 
      img.setAttribute('src', photoUrl + "photo.jpg"); 
      document.getElementById('place-list').appendChild(img); 

      // Create a marker for each place. 
      markers.push(new google.maps.Marker({ 
       map: map, 
       icon: photos[0].getUrl({'maxWidth' : 35,maxHeight' : 35}) 
       title: place.name, 
       position: place.geometry.location 
      })); 

      if (place.geometry.viewport) { 
       // Only geocodes have viewport. 
       bounds.union(place.geometry.viewport); 
      } else { 
       bounds.extend(place.geometry.location); 
      } 
      }); 
      map.fitBounds(bounds); 
     }); 
     } 

    </script> 
    <script src="https://maps.googleapis.com/maps/api/js?key=<KEY_API>&libraries=places&callback=initAutocomplete" 
     async defer></script> 
    </body> 
    </html>