google-maps - 没有地图的谷歌地方图书馆

Question

我正在尝试将 google 地方库用于附近的搜索请求： https ://developers.google.com/maps/documentation/javascript/places#place_search_requests

我只想提取 json 响应并将其放入 html 列表中，我现在想在地图或其他东西上显示结果。我根本不想使用地图。但是在文档中它指出必须有一张地图

service = new google.maps.places.PlacesService(**map**);

为了将其作为 PlacesService 函数中的参数传递。我现在要做的是添加一个高度为 0 的地图，但它仍然会消耗大量内存（我开发了一个 sencha touch 2 应用程序，内存很重要）。有没有在没有地图的情况下使用附近搜索请求的解决方法？我不想使用 Google Places API，因为它不支持 JSONP 请求。

Answer 1

正如所记录的， PlacesService 接受一个地图或一个节点作为参数，在其中呈现结果的属性。

所以你只需要使用节点（一个节点是一个 html 元素）而不是地图。

请注意：隐藏属性违反了场所政策（在用作参数时也会隐藏地图，因为地图会显示属性）

这也可能让您感兴趣：Google Places API 这是否违反 TOC？

---

示例：简而言之

如果您使用 jQuery：

var service = new google.maps.places.PlacesService($('#tag-id').get(0));

如果是纯 Javascript：

var service = new google.maps.places.PlacesService(document.createElement('div'));

然后像往常一样继续使用其余的示例代码：

  service.nearbySearch(request, callback);

---

示例：使用返回的详细信息

此示例在 jsFiddle 上的现场演示。

注意：此示例使用jQuery.

<ul class="reviews__content" id="reviews__content">
</ul>
<div id="service-helper"></div>

<script async defer
src="https://maps.googleapis.com/maps/api/js?key=GOOGLE_API_KEY_HERE&libraries=places&callback=getRelevantGoogleReviews">
</script>
<script type="text/javascript">
   window.getRelevantGoogleReviews = function(){
     var service = new google.maps.places.PlacesService($('#service-helper').get(0)); // note that it removes the content inside div with tag '#service-helper'

     service.getDetails({
         placeId: 'ChIJAwEf5VFQqEcRollj8j_kqnE'  // get a placeId using https://developers.google.com/places/web-service/place-id
        }, function(place, status) {
            if (status === google.maps.places.PlacesServiceStatus.OK) {
              var resultcontent = '';
              for (i=0; i<place.reviews.length; ++i) {
                //window.alert('Name:' + place.name + '. ID: ' + place.place_id + '. address: ' + place.formatted_address);
                resultcontent += '<li class="reviews__item">'
                resultcontent += '<div class="reviews__review-er">' + place.reviews[i].author_name + '</div>';
                var reviewDate = new Date(place.reviews[i].time * 1000);
                var reviewDateMM = reviewDate.getMonth() + 1;
                var reviewDateFormatted = reviewDate.getDate() + '/' + reviewDateMM + '/' + reviewDate.getFullYear(); 
                resultcontent += '<div class="reviews__review-date">' + reviewDateFormatted + '</div>';
                resultcontent += '<div class="reviews__review-rating reviews__review-rating--' + place.reviews[i].rating +'"></div>';
                if (!!place.reviews[i].text){
                  resultcontent += '<div class="reviews__review-comment">' + place.reviews[i].text + '</div>';
                }
                resultcontent += '</li>'
              }
              $('#reviews__content').append(resultcontent);
            }
        });
    }
</script>

Answer 2

如果您想从 place_id 获取位置数据，您可以使用 Geocoder 类：这里是文档。使用此类，您可以将 place_id 传递给方法 geocode() 并获取坐标和其他位置数据。

Answer 3

刚刚看到人在上面的评论中询问如何在不初始化地图的情况下初始化地点服务？所以我想我会在这里添加它。

placesService = new google.maps.places.PlacesService($('#predicted-places').get(0));

不过，您需要先创建一个具有该 id 的 html 元素。

Answer 4

正在为注册表单制作自定义地址自动填充功能。

import {useState, useRef, useEffect } from 'React'

function AutoCompleteInput(){

const [predictions, setPredictions] = useState([]);
const [input, setInput] = useState('');
const [selectedPlaceDetail, addSelectedPlaceDetail] = useState({})
const predictionsRef = useRef();


useEffect(
()=>{
      try {
        autocompleteService.current.getPlacePredictions({ input }, predictions => {
          setPredictions(predictions);
        });
      } catch (err) {
       // do something
      }
    }
}, [input])

const handleAutoCompletePlaceSelected = placeId=>{
 if (window.google) {
      const PlacesService = new window.google.maps.places.PlacesService(predictionsRef.current);
      try {
        PlacesService.getDetails(
          {
            placeId,
            fields: ['address_components'],
          },
         place => addSelectedPlaceDetail(place)
        );
      } catch (e) {
        console.error(e);
      }
    }
}

return (
  <>
   <input onChange={(e)=>setInput(e.currentTarget.value)}
    <div ref={predictionsRef}
     { predictions.map(prediction => <div onClick={ ()=>handleAutoCompletePlaceSelected(suggestion.place_id)}> prediction.description </div> )
   }
   </div>
  <>
 )
}

所以基本上，你设置了自动完成调用，并在你的本地状态下取回预测结果。

从那里，使用单击处理程序映射并显示结果，该处理程序将对场所服务执行后续请求，并可以访问完整地址对象或您想要的任何字段的 getDetails 方法。

然后，您将该响应保存到您当地的州，然后离开。

Answer 5

我遇到了同样的问题。

为什么在 Places Api 已启用时使用 Maps javascript Api。是否需要为这个简单的任务支付额外费用？

此代码中未使用 Maps Javascript API。所有 google.maps.Map API 方法均已取出。它在jsfiddle上运行良好。

只需检查它是否适用于本地 PC。大多数情况下，当我尝试在本地 PC 存储上运行它并使用谷歌 API 控制台提供的有限请求时，它会给出 403 错误。

从 google 开发者控制台获取 API 密钥并将其插入代码脚本标签处的 YOUR_API_KEY 插槽中 不要尝试在此处运行代码。显然。API 密钥需要更换。

// 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 initMap() {

  var input = document.getElementById('pac-input');

  var options = {
    types: ['establishment']
  };

  var autocomplete = new google.maps.places.Autocomplete(input, options);

  autocomplete.setFields(['place_id', 'geometry', 'name', 'formatted_address', 'formatted_phone_number', 'opening_hours', 'website', 'photos']);

  autocomplete.addListener('place_changed', placechange);

  function placechange() {

    var place = autocomplete.getPlace();
    var photos = place.photos;

    document.getElementById('place_name').textContent = place.name;
    document.getElementById('place_id').textContent = place.place_id;
    document.getElementById('place_address').textContent = place.formatted_address;
    document.getElementById('phone_no').textContent = place.formatted_phone_number;
    document.getElementById('open_time').textContent = place.opening_hours.weekday_text[0];
    document.getElementById('open_now').textContent = place.opening_hours.open_now;
    document.getElementById('photo').src = photos[0].getUrl();
    document.getElementById('photo').style = "width:50%;";
    document.getElementById('website').textContent = place.website;


  }
}

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */

#map {
  height: 100%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.controls {
  background-color: #fff;
  border-radius: 2px;
  border: 1px solid transparent;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
  font-family: Roboto;
  font-size: 15px;
  font-weight: 300;
  height: 29px;
  margin-left: 5px;
  margin-top: 10px;
  margin-bottom: 10px;
  outline: none;
  padding: 0 11px 0 13px;
  text-overflow: ellipsis;
  width: 400px;
}

.controls:focus {
  border-color: #4d90fe;
}

.title {
  font-weight: bold;
}

#infowindow-content {
  display: none;
}

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

<div>
  <input id="pac-input" class="controls" type="text" placeholder="Enter a business">
</div>

<div id="info-table">
  Name: <span id="place_name"></span><br> Place id: <span id="place_id"></span><br> Address :<span id="place_address"></span><br> Phone : <span id="phone_no"></span><br> Openhours: <span id="open_time"></span><br> Open Now : <span id="open_now"></span><br>  website : <span id="website"></span><br> photo :<br> <img id="photo" src="" style="display:none;" />
</div>

<div id="map"></div>
<div id="infowindow-content">
  <span id="place-name" class="title"></span><br>
  <strong>Place ID:</strong> <span id="place-id"></span><br>
  <span id="place-address"></span>
</div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap">
</script>