谷歌地图搜索框
[英]Google map search box
问题描述
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. 
我正在尝试使用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>
2 个解决方案
解决方案1
23 已采纳 2015-04-27 07:24:37
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>
解决方案2
7 2015-04-25 21:10:25
there is no
place_changed-event for aSearchBox(it's an event of Autocomplete).SearchBox没有place_changed-event（它是自动完成的事件）。 The event for aSearchboxis calledplaces _changed对于该事件Searchbox被称为place s _changedthere is a typo
palce有一个错字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 Autocomplete instead. 当您想要多个标记时，必须为每个位置创建单独的标记（并另外删除以前添加的标记），当您希望单个标记使用自动完成时 。
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.