谷歌地方图书馆没有地图

Question 1

我正在尝试将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请求。

Question 2

如所证明的，PlacesService接受地图或表示结果结果属性的节点作为参数。

因此，您只需要使用节点（节点是html元素）而不是地图即可。

请注意：隐藏属性会违反places-policies（在用作参数时也会隐藏地图，因为地图会显示属性）

这对您也可能很有趣：Google place 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>

Question 3

如果您想从place_id获取位置数据，则可以使用Geocoder类：在此处，获取文档。使用此类，您可以将place_id传递给方法geocode（）并获取坐标和其他位置数据。

Question 4

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

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

不过，您首先需要使用该ID创建一个html元素。

Question 5

正在为注册表单自动创建自定义地址。

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

因此，基本上，您可以设置自动完成呼叫，并以本地状态获取预测结果。

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

然后，您将该响应保存到本地状态，然后离开。

Question 6

我遇到了同样的问题。

为什么已启用Places Api时使用Maps javascript Api。为此简单任务需要额外付费吗？

此代码中未使用Maps Javascript API。所有google.maps.Map API方法均已删除。它在jsfiddle上工作正常。

只需检查它是否在本地PC上工作即可。在大多数情况下，当我尝试在本地PC存储上运行它并使用google 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>