Question

我正在尝试使用google map api中的搜索框搜索地点。我正在使用Google Map Javascript api v3。当我尝试搜索某个地方时，它并不开心。任何人都可以帮我解决问题。这是html和javascript代码段。

<html>

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <meta name="description" content="">
        <meta name="author" content="">
        <link href="css/bootstrap.min.css" rel="stylesheet">

        <link href="css/bootstrap.css" rel="stylesheet">
        <script src="js/jquery.min.js"></script>
        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
    </head>
    <body>
        <div class="col-md-8">
            <input id="pac-input" class="controls" type="text" placeholder="Search Box">
            <div class="container" id="map-canvas" ></div> 
        </div>


        <script>

        var map = new google.maps.Map(document.getElementById('map-canvas'),{
            center:{
            lat: 12.9715987,
            lng: 77.59456269999998
            },
            zoom: 12
        });

        var marker = new google.maps.Marker({
            position:{
            lat: 12.9715987,
            lng: 77.59456269999998
            },
            map: map,
            draggable:true
        });

        var searchBox = new google.maps.places.SearchBox(document.getElementById('pac-input'));

        google.maps.event.addListener(searchBox , 'place_changed' , function(){
            var places = searchBox.getPlaces();
            var bounds =  new google.maps.LatLngBounds();
            var i,place;
            for( i = 0; palce = places[i]; i++)
            {
            bounds.extend(place.geometry.location);
            marker.setPosition(place.geometry.location);
            }
            map.fitBounds(bounds);
            map.setZoom(12);
        });



        </script>
        <script src="js/jquery.min.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="js/bootstrap.min.js"></script>
        <script src="js/Test.js"></script>
    </body>

</html>

Answer 1

＆＃13;

 function init() {
   var map = new google.maps.Map(document.getElementById('map-canvas'), {
     center: {
       lat: 12.9715987,
       lng: 77.59456269999998
     },
     zoom: 12
   });


   var searchBox = new google.maps.places.SearchBox(document.getElementById('pac-input'));
   map.controls[google.maps.ControlPosition.TOP_CENTER].push(document.getElementById('pac-input'));
   google.maps.event.addListener(searchBox, 'places_changed', function() {
     searchBox.set('map', null);


     var places = searchBox.getPlaces();

     var bounds = new google.maps.LatLngBounds();
     var i, place;
     for (i = 0; place = places[i]; i++) {
       (function(place) {
         var marker = new google.maps.Marker({

           position: place.geometry.location
         });
         marker.bindTo('map', searchBox, 'map');
         google.maps.event.addListener(marker, 'map_changed', function() {
           if (!this.getMap()) {
             this.unbindAll();
           }
         });
         bounds.extend(place.geometry.location);


       }(place));

     }
     map.fitBounds(bounds);
     searchBox.set('map', map);
     map.setZoom(Math.min(map.getZoom(),12));

   });
 }
 google.maps.event.addDomListener(window, 'load', init);

＆＃13;

html,
body,
#map-canvas {
  margin: 0;
  padding: 0;
  height: 100%;
}

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
<input id="pac-input" class="controls" type="text" placeholder="Search Box">
<div class="container" id="map-canvas" style="height:300px;"></div>

＆＃13;

Answer 2

place_changed没有SearchBox - 事件（这是自动填充的事件）。 Searchbox的事件称为places_changed
有一个拼写错误palce
```
for( i = 0; palce = places[i]; i++)
```
目前尚不清楚您要实现的目标，迭代地点（可能有多个地方）并将单个标记的位置设置为当前位置的位置。结果是标记总是位于返回结果的最后位置（对我来说没有意义）。当您想要多个标记时，您必须为每个位置创建单独的标记（并另外删除以前添加的标记），当您希望单个标记使用Autocomplete时。

 function init() {
   var map = new google.maps.Map(document.getElementById('map-canvas'), {
     center: {
       lat: 12.9715987,
       lng: 77.59456269999998
     },
     zoom: 12
   });


   var searchBox = new google.maps.places.SearchBox(document.getElementById('pac-input'));
   map.controls[google.maps.ControlPosition.TOP_CENTER].push(document.getElementById('pac-input'));
   google.maps.event.addListener(searchBox, 'places_changed', function() {
     searchBox.set('map', null);


     var places = searchBox.getPlaces();

     var bounds = new google.maps.LatLngBounds();
     var i, place;
     for (i = 0; place = places[i]; i++) {
       (function(place) {
         var marker = new google.maps.Marker({

           position: place.geometry.location
         });
         marker.bindTo('map', searchBox, 'map');
         google.maps.event.addListener(marker, 'map_changed', function() {
           if (!this.getMap()) {
             this.unbindAll();
           }
         });
         bounds.extend(place.geometry.location);


       }(place));

     }
     map.fitBounds(bounds);
     searchBox.set('map', map);
     map.setZoom(Math.min(map.getZoom(),12));

   });
 }
 google.maps.event.addDomListener(window, 'load', init);

html,
body,
#map-canvas {
  margin: 0;
  padding: 0;
  height: 100%;
}

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
<input id="pac-input" class="controls" type="text" placeholder="Search Box">
<div class="container" id="map-canvas" style="height:300px;"></div>

Google地图搜索框

2 个答案: