如何在網站上將搜索框添加到 Google map？

Question

我已將地圖添加到我的網站，但似乎無法添加帶有 map 的搜索框來搜索位置。 我在下面給出了用於添加地圖的代碼。 有人可以幫忙在代碼中添加搜索框嗎？

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

Answer 1

您可以在代碼中使用自動完成功能。 它將提供一個建議列表來完成用戶的輸入。 從列表中選擇地點后，您可以獲取地點屬性以將其顯示在 map 上並在其上放置標記。

這是一個簡化的代碼，我將您的代碼合並到Google Maps Platform Autocomplete 代碼示例中。

<!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>

您還可以在此處查看此簡化代碼。

Answer 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));

如何在網站上將搜索框添加到 Google map？

問題描述

2 個解決方案

解決方案1
0 2019-11-18 03:25:55

解決方案2
-1 2019-10-30 11:27:27

如何在網站上將搜索框添加到 Google map？

問題描述

2 個解決方案

解決方案1 0 2019-11-18 03:25:55

解決方案2 -1 2019-10-30 11:27:27

解決方案1
0 2019-11-18 03:25:55

解決方案2
-1 2019-10-30 11:27:27