Javascript 谷歌地图搜索框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29869261/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Google map search box
提问by Anil Samal
I am trying to search places using search box in google map api .I am using Google Map Javascript api v3 .When I try to search some place it is not happning .Can anyone help me what could be the issue.Here is the html and javascript code snippet.
我正在尝试使用谷歌地图 api 中的搜索框搜索地点。我正在使用谷歌地图 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>
回答by Anil Samal
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>回答by Dr.Molle
there is no
place_changed-event for aSearchBox(it's an event of Autocomplete). The event for aSearchboxis calledplaces_changedthere is a typo
palcefor( i = 0; palce = places[i]; i++)It's not clear what you are trying to achieve, you iterate over the places(there may be multiple places) and set the position of a single Marker to the location of the current place. The result will be that the Marker is always placed at the location of the last place of the returned results(makes no sense to me). When you want to have multiple Markers you must create separate Markers for each place(and additionally remove previously added markers ), when you want a single Marker use the Autocompleteinstead.
没有
place_changed-event了SearchBox（它是自动完成的事件）。a 的事件Searchbox称为places_changed有一个错字
palcefor( i = 0; palce = places[i]; i++)目前尚不清楚您要实现的目标，您遍历位置（可能有多个位置）并将单个标记的位置设置为当前位置的位置。结果将是 Marker 始终放置在返回结果的最后一个位置的位置（对我来说没有意义）。当您想要多个标记时，您必须为每个位置创建单独的标记（并另外删除先前添加的标记），当您想要单个标记时，请改用自动完成。
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>