Google地图搜索框 [英] Google map search box
本文介绍了Google地图搜索框的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图在谷歌地图api中搜索使用搜索框的地方。我正在使用谷歌地图Javascript api v3。当我尝试搜索某个地方时，它并不开心。任何人都可以帮助我解决问题。这里有html和javascript代码片段。
< html>
< head>
< meta charset =utf-8>
< meta http-equiv =X-UA-Compatiblecontent =IE = edge>
< meta name =viewportcontent =width = device-width，initial-scale = 1.0，maximum-scale = 1.0，user-scalable = no>
< meta name =descriptioncontent =>
< meta name =authorcontent =>
< link href =css / bootstrap.min.css =stylesheet>
< link href =css / bootstrap.css =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-inputclass =controlstype =textplaceholder =Search Box>
< div class =containerid =map-canvas>< / div>
< / div>
< script>
var map = new google.maps.Map（document.getElementById（'map-canvas'），{
center：{
lat：12.9715987，
ng ：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。位置）;
marker.setPosition（place.geometry.location）;
}
map.fitBounds（bounds）;
map.setZoom（12）;
} ）;
< / script>
< script src =js / jquery.min.js>< / script>
<！ - 包含所有编译的插件（如下），或者根据需要包含单个文件 - >
< script src =js / bootstrap.min.js>< / script>
< script src =js / Test.js>< / script>
< / body>
< / html>
解决方案
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-输入））; 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;填充：0; height：100％;}
< script src = https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places\"></script><input id =pac-inputclass =控制type =textplaceholder =搜索框>< div class =containerid =map-canvasstyle =height：300px;>< / div>
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.
<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>
解决方案
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地图搜索框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
