Question

我想在我的网站上添加Google地方信息搜索框（AKA Google商家信息自动填充功能），但我想让它在没有地图的情况下显示。我只需要自动填充搜索框。

这是文档链接：https://developers.google.com/maps/documentation/javascript/examples/places-searchbox

我找了一个解决方案，却找不到一个。（我发现的只是没有地图的地址搜索）

这是我的完整代码：（我确实得到了一个API KEY并将其植入代码的底部并且效果很好，但它与地图一起显示）。

    <!DOCTYPE html>
    <html>
      <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <meta charset="utf-8">
        <title></title>
        <style>
          /* 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;
          }
          #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>
        <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)
                };

                // Create a marker for each place.
                markers.push(new google.maps.Marker({
                  map: map,
                  icon: icon,
                  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=MY_API_KEY&libraries=places&callback=initAutocomplete"
             async defer></script>
      </body>
    </html>

Answer 1

您必须使用地方自动填充API。它允许您每小时提出1000个请求，如果您启用结算，则每天可以有150000个请求https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY

您可以为搜索设置地点偏好设置 https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&region=AU 在上面的链接中它返回与AU相关的搜索

Answer 2

好的，这是答案：

创建API密钥： https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete#try-it-yourself
使用ajax操作此链接（“输入”是您要查找的内容，“位置”是您的纬度和经度 - 您应该从用户的ip获取它）的 https://maps.googleapis.com/maps/api/place/autocomplete/xml?input=pasta&types=establishment&location=37.76999,-122.44696&radius=500&key=YOUR_API_KEY

请记住将YOUR_API_KEY更改为您的API kEY

这是我从以下地方获得的：

https://developers.google.com/places/web-service/autocomplete?csw=1#requirements

您无法使用我在原始问题中发布的链接

如果您打算使用它，您不得收取服务费。您可以在此处阅读许可证要求： https://developers.google.com/maps/terms?csw=1#section_9_1

如何在没有地图的情况下使用Google地方信息搜索框？

2 个答案: