javascript - 如何在不使用 div 元素的情况下获得 google 搜索服务？

Question

我有这个代码:

<div id="map" style="display: none"></div>

js

var map;
var infowindow;

function initMap() {
    var pyrmont = {lat: -36.1699, lng: 115.1398};

    map = new google.maps.Map(document.getElementById('map'));

    infowindow  = new google.maps.InfoWindow();
    var service = new google.maps.places.PlacesService(map);
    service.textSearch({
        location: pyrmont,
        radius  : 500,
        query   : 'Las Vegas Vehicle Inspection Stations'
    }, callback);
}

function callback(results, status) {
    if (status === google.maps.places.PlacesServiceStatus.OK) {
        for (var i = 0; i < results.length; i++) {

            console.log(results[i]);
        }
    }
}

要获得结果，我必须将map添加到var service = new google.maps.places.PlacesService(map);

有没有一种方法可以在不使用 div 元素的情况下获取结果？

有什么想法吗？

Answer 1

无需 ma​​p div 即可获取结果。您需要提供 google.maps.Map或 HTML Div(以便可以呈现属性):

google.maps.places.PlacesService Constructor

PlacesService(attrContainer:HTMLDivElement|Map)
Creates a new instance of the PlacesService that renders attributions in the specified container.

proof of concept fiddle

代码片段:

function initMap() {
  var pyrmont = {
    lat: -36.1699,
    lng: 115.1398
  };
  var service = new google.maps.places.PlacesService(document.getElementById("placeDiv"));
  service.textSearch({
    location: pyrmont,
    radius: 500,
    query: 'Las Vegas Vehicle Inspection Stations'
  }, callback);
}

function callback(results, status) {
  if (status === google.maps.places.PlacesServiceStatus.OK) {
    var resultsStr = "<table><tr><th>name</th><th>coordinates</th></tr>";
    for (var i = 0; i < results.length; i++) {
      resultsStr += "<tr><td>" + results[i].name + "</td><td>" + results[i].geometry.location.toUrlValue(6) + "</td></tr>";
      console.log(results[i]);
    }
    resultsStr += "</table>";
    document.getElementById("results").innerHTML = resultsStr;
  }
}
google.maps.event.addDomListener(window, "load", initMap);

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
<div id="placeDiv"></div>
<div id="results"></div>