如何在网站上的谷歌地图中添加搜索框？答案

【问题标题】：How to add search box to Google map on website?如何在网站上的谷歌地图中添加搜索框？
【发布时间】：2020-02-25 16:20:54
【问题描述】：

我已将地图添加到我的网站，但似乎无法添加带有地图的搜索框来搜索位置。我在下面给出了用于添加地图的代码。有人可以帮忙在代码中添加搜索框吗？

<div  id="googleMap" style="width:100%;height:400px;"></div>

function myMap() {
      var mapProp= {
        center:new google.maps.LatLng(12.9716, 77.5946),
        zoom:10,
      };
      var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

      google.maps.event.addListener(map, 'click', function(e) {
        placeMarker(e.latLng, map);
        document.getElementById("latitude").value = e.latLng.lat();
        document.getElementById("longitude").value = e.latLng.lng();
      });

      function placeMarker(position, map) {
        var marker = new google.maps.Marker({
          position: position,
          map: map
        });
        map.panTo(position);
      }

    }


    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MYAPIKEY&callback=myMap"></script>

【问题讨论】：

你看到example in the documentation了吗？您尝试将其添加到代码中时遇到了什么麻烦？请提供一个 minimal reproducible example 来证明您的问题。
How to add a GoogleMap Search Box to my customized map?的可能重复

标签： javascript html google-maps

【解决方案1】：

您可以在代码中使用自动完成功能。它将提供一个建议列表来完成用户的输入。从列表中选择地点后，您可以获取地点属性以将其显示在地图上并在其上放置标记。

这是一个简化的代码，我将您的代码合并到Google Maps Platform Autocomplete code sample。

<!DOCTYPE html>
<html>

<head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>

        #googleMap {
            height: 100%;
        }

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

        #pac-container {
            padding: 5px;
        }

        .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: #ffffff;
            font-family: Roboto;
        }

        #title {
            color: #fff;
            background-color: #4d90fe;
            font-size: 15px;
            font-weight: 500;
            padding-left: 5px;
        }


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

        #pac-input {

            font-family: Roboto;
            width: 400px;
        }

        #pac-input:focus {
            border-color: #4d90fe;
        }
    </style>
</head>

<body>
    <div class="pac-card" id="pac-card">

        <div id="title">
            Search Address
        </div>
        <div id="pac-container">
            <input id="pac-input" type="text" placeholder="Enter a location">
        </div>
    </div>
    <div id="googleMap"></div>


    <script>
        function myMap() {
            var mapProp = {
                center: new google.maps.LatLng(12.9716, 77.5946),
                zoom: 10,
            };
            var map = new google.maps.Map(document.getElementById('googleMap'), mapProp);
            var card = document.getElementById('pac-card');
            var input = document.getElementById('pac-input');

            map.controls[google.maps.ControlPosition.TOP_RIGHT].push(card);


            var marker = new google.maps.Marker({
                map: map
            });

            //Use Places Autocomplete
            var autocomplete = new google.maps.places.Autocomplete(input);
            autocomplete.addListener('place_changed', function() {
                marker.setVisible(false);
                var place = autocomplete.getPlace();
                if (!place.geometry) {
                    // User entered the name of a Place that was not suggested and
                    // pressed the Enter key, or the Place Details request failed.
                    window.alert("No details available for input: '" + place.name + "'");
                    return;
                }

                // If the place has a geometry, then present it on a map.
                if (place.geometry.viewport) {
                    map.fitBounds(place.geometry.viewport);
                } else {
                    map.setCenter(place.geometry.location);
                    map.setZoom(10);
                }
                //Put markers on the place
                marker.setPosition(place.geometry.location);
                marker.setVisible(true);

            });

        }
    </script>
    <!-- Replace the value of the key parameter with your own API key. -->
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=myMap" async defer></script>
</body>

</html>

您也可以查看此简化代码here。

【讨论】：

【解决方案2】：

你可以这样使用：

    // Create the search box and link it to the UI element.
  var input = /** @type {HTMLInputElement} */(
      document.getElementById('pac-input'));
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

  var searchBox = new google.maps.places.SearchBox(
    /** @type {HTMLInputElement} */(input));

【讨论】：