如何制作没有标记的谷歌地图地方搜索框？答案

【问题标题】：How to make Google Map Place Search Box without Marker?如何制作没有标记的谷歌地图地方搜索框？
【发布时间】：2015-12-12 11:26:38
【问题描述】：

这是用于搜索特定位置的谷歌地图搜索功能的代码片段。我如何制作一个谷歌地图搜索功能，在没有标记的情况下搜索特定位置。我研究过谷歌地图搜索框，但到目前为止，我研究的大部分内容都有标记，即使在 Google Developers Website 中也找不到任何标记。

 var searchBox = new google.maps.places.SearchBox(document.getElementById('searchmap'));

 google.maps.event.addListener(searchBox,'places_changed',function() {

    var places = searchBox.getPlaces();
    var bounds = new google.maps.LatLngBounds();
    var i, place;

    for (var i = 0; place= place[i]; i++) {
        bounds.extend(place.geometry.location);
        marker.setPosition(place.geometry.location);

        }
        map.fitBounds(bounds);
        map.setZoom(15);
    });
 google.maps.event.addListener(marker,'position_changed', function(){

    var lat = marker.getPosition().lat();
    var lng = marker.getPosition().lat();

    $('#lat').val(lat);
    $('#lat').val(lat);
 });

【问题讨论】：

标签： javascript google-maps laravel google-maps-api-3 google-maps-markers

【解决方案1】：

这是来自Places search box 页面的修改示例，该示例演示了如何利用 Google Place Autocomplete 功能（删除了使用标记来标记位置的依赖项）

function initAutocomplete() {
    var map = new google.maps.Map(document.getElementById('map'), {
        center: { lat: -33.8688, lng: 151.2195 },
        zoom: 13,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });


    var input = document.getElementById('searchmap');
    var searchBox = new google.maps.places.SearchBox(input);
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

  
    searchBox.addListener('places_changed', function () {
        var places = searchBox.getPlaces();

        if (places.length == 0) {
            return;
        }
   
        var bounds = new google.maps.LatLngBounds();
        places.forEach(function (place) {
           
            if (place.geometry.viewport) {
                // Only geocodes have viewport.
                bounds.union(place.geometry.viewport);
            } else {
                bounds.extend(place.geometry.location);
            }
        });
        map.fitBounds(bounds);
    });
    
}

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

#map {
    height: 100%;
}

.controls {
    margin-top: 10px;
    border: 1px solid transparent;
    border-radius: 2px 0 0 2px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    height: 32px;
    outline: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

#searchmap {
    background-color: #fff;
    font-family: Roboto;
    font-size: 15px;
    font-weight: 300;
    margin-left: 12px;
    padding: 0 11px 0 13px;
    text-overflow: ellipsis;
    width: 300px;
}

#searchmap:focus {
    border-color: #4d90fe;
}

<input id="searchmap" class="controls" type="text" placeholder="Search Box">
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&callback=initAutocomplete"
            async defer></script>

【讨论】：