如何将SearchBox整合到Google Maps JavaScript API v3中？ [英] How to integrate SearchBox in Google Maps JavaScript API v3?
本文介绍了如何将SearchBox整合到Google Maps JavaScript API v3中？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想创建一个带有搜索框的谷歌地图，就像这边： https：//google-developers.appspot.com / ... 与JavaScript API v3。
目前我使用以下代码通过获取url（php get）中的经度和纬度来显示地图：
<？ php
$ latitude = $ _GET ['lat'];
$ longitude = $ _GET ['long'];
？>
<！DOCTYPE html>
< html>
< head>
< script type =text / javascript>
< / script>
< meta name =viewportcontent =initial-scale = 1.0，user-scalable = no/>
< style type =text / css>
html {height：100％}
body {height：100％;保证金：0; padding：0}
#map_canvas {height：100％}
＃search-panel {
position：absolute;
top：5px;
剩下：50％;
margin-left：-180px;
width：350px;
z-index：5;
background-color：#fff;
padding：5px;
border：1px solid＃999;
}
#target {
width：345px;
}
< / style>
< script type =text / javascript
src =http://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXX&sensor=true>
< / script>
< script type =text / javascript>
函数initialize（）{
var input = document.getElementById（'searchTextField'）;
var image ='pin.png';
var myLatlng = new google.maps.LatLng（<？php echo$ latitude？>，<？php echo$ longitude？>）;
var mapOptions = {
center：myLatlng，
zoom：15，
mapTypeId：google.maps.MapTypeId.ROADMAP，
streetViewControl：true，
};
var map = new google.maps.Map（document.getElementById（map_canvas），
mapOptions）;
var marker = new google.maps.Marker（{
icon：image，
position：myLatlng，
map：map，
动画：google.maps.Animation.DROP，
title：您的位置
}）;
}
< / script>
< / head>
< body onload =initialize（）>
< div id =map_canvasstyle =width：100％; height：100％>< / div>
< / body>
< / html>
但我不明白，要将搜索框整合到指定网站上！
有人可以帮忙吗？
这个，但我不工作！：
<？php
$纬度= $ _GET [ 'LAT'];
$ longitude = $ _GET ['long'];
？>
<！DOCTYPE html>
< html>
< head>
< meta name =viewportcontent =initial-scale = 1.0，user-scalable = no/>
< style type =text / css>
html {height：100％}
body {height：100％;保证金：0; padding：0}
#map_canvas {height：100％}
＃search-panel {
position：absolute;
top：5px;
剩下：50％;
margin-left：-180px;
width：350px;
z-index：5;
background-color：#fff;
padding：5px;
border：1px solid＃999;
}
#target {
width：345px;
}
< / style>
< script type =text / javascript
src =http://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXX&sensor=true>
< / script>
< script type =text / javascript>
函数initialize（）{
var searchBox = new google.maps.places.SearchBox（input，{
bounds：defaultBounds //必须先定义
}）;
google.maps.event.addListener（searchBox，'places_changed'，function（）{
var places = searchBox.getPlaces（）;
//在这里做你的东西
var input = document.getElementById（'searchTextField'）;
var image ='pin.png';
var myLatlng = new google.maps.LatLng（ <？php echo$ latitude？>，<？php echo$ longitude？>）;
var mapOptions = {
center：myLatlng，
zoom：15 ，
mapTypeId：google.maps.MapTypeId.ROADMAP，
streetViewControl：true，
};
var map = new google.maps.Map（document.getElementById（map_canvas），
mapOptions）;
var marker = new google.maps.Marker（{
图标：图片，
位置：myLatlng，
地图：地图，
动画：google.maps.Animation.DROP，
标题：您的位置
va r input = document.getElementById（'target'）;
var searchBox = new google.maps.places.SearchBox（input）;
var markers = [];
google.maps.event.addListener（searchBox，'places_changed'，function（）{
var places = searchBox.getPlaces（）;
}）;
}）;
}
< / script>
< / head>
< body onload =initialize（）>
< div id =search-panel>
< input id =targettype =textplaceholder =搜索框>
< / div>
< div id =map_canvasstyle =width：100％; height：100％>< / div>
< / body>
< / html>
解决方案
您还必须加载地点搜索框：
var searchBox = new google.maps.places.SearchBox（input，{
bounds：defaultBounds // have to be定义的第一个
}）;
然后，您可以收听 places_changed 事件：
google.maps.event.addListener（searchBox，'places_changed'，function（）{
var places = searchBox.getPlaces（）;
//在这里做你的东西
}）;
查看您发布的示例页面的源代码，以了解要做什么在那里，例如绘图标记等。
您可以在 SearchBox API文档。
I would like to create a google map with search box on top like on this side: https://google-developers.appspot.com/... with the JavaScript API v3.
At the moment I use the following code to show a map by getting the latitude and longitude in the url (php get):
<?php
$latitude = $_GET['lat'];
$longitude = $_GET['long'];
?>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
</script>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
#search-panel {
position: absolute;
top: 5px;
left: 50%;
margin-left: -180px;
width: 350px;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
}
#target {
width: 345px;
}
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXX&sensor=true">
</script>
<script type="text/javascript">
function initialize() {
var input = document.getElementById('searchTextField');
var image = 'pin.png';
var myLatlng = new google.maps.LatLng(<?php echo "$latitude" ?>, <?php echo "$longitude" ?>);
var mapOptions = {
center: myLatlng,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: true,
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
var marker = new google.maps.Marker({
icon: image,
position: myLatlng,
map: map,
animation: google.maps.Animation.DROP,
title:"You Location"
});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
But I don't get it, to integrate the Search Box like on the named site!!!
Can someone help?
I edited the code to this, but I doesn't work!:
<?php
$latitude = $_GET['lat'];
$longitude = $_GET['long'];
?>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
#search-panel {
position: absolute;
top: 5px;
left: 50%;
margin-left: -180px;
width: 350px;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
}
#target {
width: 345px;
}
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXX&sensor=true">
</script>
<script type="text/javascript">
function initialize() {
var searchBox = new google.maps.places.SearchBox(input, {
bounds: defaultBounds // have to be defined first
});
google.maps.event.addListener(searchBox, 'places_changed', function() {
var places = searchBox.getPlaces();
// do your stuff here
var input = document.getElementById('searchTextField');
var image = 'pin.png';
var myLatlng = new google.maps.LatLng(<?php echo "$latitude" ?>, <?php echo "$longitude" ?>);
var mapOptions = {
center: myLatlng,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: true,
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
var marker = new google.maps.Marker({
icon: image,
position: myLatlng,
map: map,
animation: google.maps.Animation.DROP,
title:"You Location"
var input = document.getElementById('target');
var searchBox = new google.maps.places.SearchBox(input);
var markers = [];
google.maps.event.addListener(searchBox, 'places_changed', function() {
var places = searchBox.getPlaces();
});
});
}
</script>
</head>
<body onload="initialize()">
<div id="search-panel">
<input id="target" type="text" placeholder="Search Box">
</div>
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
解决方案
You also have to load the Places Search Box:
var searchBox = new google.maps.places.SearchBox(input, {
bounds: defaultBounds // have to be defined first
});
Then you can listen to the places_changed event:
google.maps.event.addListener(searchBox, 'places_changed', function() {
var places = searchBox.getPlaces();
// do your stuff here
});
Have a look at the source code of the example page you posted to get an idea of what to do in there, for example drawing markers etc.
You can find more information in the SearchBox API Documentation.
这篇关于如何将SearchBox整合到Google Maps JavaScript API v3中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
