Google 本地搜索 实例
生活随笔
收集整理的這篇文章主要介紹了
Google 本地搜索 实例
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
下午把以前的代碼翻出來整理,發現有好多好東西都丟失了 :cry: ~~~
下面是一個用于搜索某個位置附近的信息的例子,效果圖如下
[img]http://dl.iteye.com/upload/attachment/464506/fe8b7219-5db4-3975-94df-d421576b6cd0.jpg[/img]
當時主要是為了得到某地附近的銀行的經緯度信息,參考網上的例子寫的.
代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google 本地搜索</title>
<link href="http://www.google.com/uds/css/gsearch.css" type="text/css" rel="stylesheet"/>
<style type="text/css">
body *, table *,
body {font-family: Arial,Sans-serif;font-size: 13px;}
h1 {
font-size : 16px;
font-weight : bold;
background-color : rgb(230, 248, 221);
border-top : 1px solid rgb(128, 198, 90);
text-align : center;
margin-bottom : 10px;
padding-bottom : 4px;
color : #676767;
}
h1 .tagline,
h1 a .tagline {
font-size : 13px;
font-weight : normal;
color : #676767;
text-decoration : underline;
cursor : pointer;
}
td {vertical-align : top;}
td.map {width: 600px;}
td.search-control {
padding-left : 25px;
width : 350px;
}
#mapDiv {
border : 1px solid #979797;
width : 100%;
height : 400px;
}
.gsc-keeper {display : none;}
.gsc-localResult .gsc-keeper {display : block;}
</style>
<script src="http://ditu.google.com/maps?file=api&v=2&key=&hl=zh-CN" type="text/javascript"></script>
<script src="http://www.google.com/uds/api?file=uds.js&v=1.0" type="text/javascript"></script>
<script type="text/javascript">
var app;
function OnLoad(keyword) {
app = new App(keyword);
}
function App(keyword) {
this.myMap = null;
this.markerList = new Array();
// create a map
this.myMap = new GMap2(document.getElementByIdx_x("mapDiv"));
this.myMap.addControl(new GSmallMapControl());
//設置搜索中心點
this.myMap.setCenter(new GLatLng(22.50128, 113.914619), 14);
// Create a search control
var searchControl = new GSearchControl();
// Add in a full set of searchers
var localSearch = new GlocalSearch();
var options = new GsearcherOptions();
options.setExpandMode(GSearchControl.EXPAND_MODE_OPEN);
searchControl.addSearcher(localSearch, options);
searchControl.addSearcher(new GvideoSearch());
searchControl.setResultSetSize(google.search.Search.LARGE_RESULTSET);
// Set the Local Search center point
localSearch.setCenterPoint(this.myMap);
// tell the searcher to draw itself and tell it where to attach
searchControl.draw(document.getElementByIdx_x("searchcontrol"));
// tell the search control to call be on start/stop
searchControl.setSearchCompleteCallback(this, App.prototype.OnSearchComplete);
searchControl.setSearchStartingCallback(this, App.prototype.OnSearchStarting);
searchControl.setOnKeepCallback(this, App.prototype.OnKeep, "view on map");
// execute an inital search
searchControl.execute(keyword);
}
App.prototype.OnSearchComplete = function(sc, searcher) {
// if we have local search results, put them on the map
if ( searcher.results && searcher.results.length > 0) {
for (var i = 0; i < searcher.results.length; i++) {
var result = searcher.results[i];
// if this is a local search result, then proceed...
if (result.GsearchResultClass == GlocalSearch.RESULT_CLASS ) {
//打印結果坐標點
printResult(result.titleNoFormatting,result.addressLines[1],result.lat,result.lng);
var markerObject = new Object();
markerObject.result = result;
markerObject.latLng = new GLatLng(parseFloat(result.lat), parseFloat(result.lng));
markerObject.gmarker = new GMarker(markerObject.latLng);
var clickHandler = method_closure(this, App.prototype.OnMarkerClick, [markerObject]);
GEvent.bind(markerObject.gmarker, "click", this, clickHandler);
this.markerList.push(markerObject);
this.myMap.addOverlay(markerObject.gmarker);
result.__markerObject__ = markerObject;
}
}
this.OnMarkerClick(this.markerList[0]);
}
}
App.prototype.OnSearchStarting = function(sc, searcher, query) {
// close the info window and clear markers
this.myMap.closeInfoWindow();
for (var i=0; i < this.markerList.length; i++) {
var markerObject = this.markerList[i];
this.myMap.removeOverlay(markerObject.gmarker);
}
this.markerList = new Array();
}
App.prototype.OnKeep = function(result) {
if (result.__markerObject__) {
markerObject = result.__markerObject__;
this.OnMarkerClick(markerObject);
}
}
App.prototype.OnMarkerClick = function(markerObject) {
this.myMap.closeInfoWindow();
var htmlNode = markerObject.result.html.cloneNode(true);
markerObject.gmarker.openInfoWindow(htmlNode);
}
function method_closure(object, method, opt_argArray) {
return function() {
return method.apply(object, opt_argArray);
}
}
//搜索
function search(){
var keyword=document.getElementByIdx_x('keyword').value;
OnLoad(keyword);
}
//打印結果
function printResult(title,address,lat,lng){
var str="*"+title+" "+address+" "+lat+","+lng+"<br/>";
document.getElementByIdx_x('resulrdiv').innerHTML+=str;
}
</script>
</head>
<body>
<table>
<tr>
<td class="map"><div id="mapDiv">Loading...</div></td>
<td class="search-control"><div id="searchcontrol">Loading...</div></td>
<td><div id="resulrdiv">結果坐標點：<br/></div></td>
</tr>
<tr><div>
<INPUT TYPE="text" id="keyword" NAME="keyword" size="40" value="銀行"/><INPUT TYPE="button" VALUE="搜索" ONCLICK="search();">
</div></tr>
</table>
</body>
</html>
下面是一個用于搜索某個位置附近的信息的例子,效果圖如下
[img]http://dl.iteye.com/upload/attachment/464506/fe8b7219-5db4-3975-94df-d421576b6cd0.jpg[/img]
當時主要是為了得到某地附近的銀行的經緯度信息,參考網上的例子寫的.
代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google 本地搜索</title>
<link href="http://www.google.com/uds/css/gsearch.css" type="text/css" rel="stylesheet"/>
<style type="text/css">
body *, table *,
body {font-family: Arial,Sans-serif;font-size: 13px;}
h1 {
font-size : 16px;
font-weight : bold;
background-color : rgb(230, 248, 221);
border-top : 1px solid rgb(128, 198, 90);
text-align : center;
margin-bottom : 10px;
padding-bottom : 4px;
color : #676767;
}
h1 .tagline,
h1 a .tagline {
font-size : 13px;
font-weight : normal;
color : #676767;
text-decoration : underline;
cursor : pointer;
}
td {vertical-align : top;}
td.map {width: 600px;}
td.search-control {
padding-left : 25px;
width : 350px;
}
#mapDiv {
border : 1px solid #979797;
width : 100%;
height : 400px;
}
.gsc-keeper {display : none;}
.gsc-localResult .gsc-keeper {display : block;}
</style>
<script src="http://ditu.google.com/maps?file=api&v=2&key=&hl=zh-CN" type="text/javascript"></script>
<script src="http://www.google.com/uds/api?file=uds.js&v=1.0" type="text/javascript"></script>
<script type="text/javascript">
var app;
function OnLoad(keyword) {
app = new App(keyword);
}
function App(keyword) {
this.myMap = null;
this.markerList = new Array();
// create a map
this.myMap = new GMap2(document.getElementByIdx_x("mapDiv"));
this.myMap.addControl(new GSmallMapControl());
//設置搜索中心點
this.myMap.setCenter(new GLatLng(22.50128, 113.914619), 14);
// Create a search control
var searchControl = new GSearchControl();
// Add in a full set of searchers
var localSearch = new GlocalSearch();
var options = new GsearcherOptions();
options.setExpandMode(GSearchControl.EXPAND_MODE_OPEN);
searchControl.addSearcher(localSearch, options);
searchControl.addSearcher(new GvideoSearch());
searchControl.setResultSetSize(google.search.Search.LARGE_RESULTSET);
// Set the Local Search center point
localSearch.setCenterPoint(this.myMap);
// tell the searcher to draw itself and tell it where to attach
searchControl.draw(document.getElementByIdx_x("searchcontrol"));
// tell the search control to call be on start/stop
searchControl.setSearchCompleteCallback(this, App.prototype.OnSearchComplete);
searchControl.setSearchStartingCallback(this, App.prototype.OnSearchStarting);
searchControl.setOnKeepCallback(this, App.prototype.OnKeep, "view on map");
// execute an inital search
searchControl.execute(keyword);
}
App.prototype.OnSearchComplete = function(sc, searcher) {
// if we have local search results, put them on the map
if ( searcher.results && searcher.results.length > 0) {
for (var i = 0; i < searcher.results.length; i++) {
var result = searcher.results[i];
// if this is a local search result, then proceed...
if (result.GsearchResultClass == GlocalSearch.RESULT_CLASS ) {
//打印結果坐標點
printResult(result.titleNoFormatting,result.addressLines[1],result.lat,result.lng);
var markerObject = new Object();
markerObject.result = result;
markerObject.latLng = new GLatLng(parseFloat(result.lat), parseFloat(result.lng));
markerObject.gmarker = new GMarker(markerObject.latLng);
var clickHandler = method_closure(this, App.prototype.OnMarkerClick, [markerObject]);
GEvent.bind(markerObject.gmarker, "click", this, clickHandler);
this.markerList.push(markerObject);
this.myMap.addOverlay(markerObject.gmarker);
result.__markerObject__ = markerObject;
}
}
this.OnMarkerClick(this.markerList[0]);
}
}
App.prototype.OnSearchStarting = function(sc, searcher, query) {
// close the info window and clear markers
this.myMap.closeInfoWindow();
for (var i=0; i < this.markerList.length; i++) {
var markerObject = this.markerList[i];
this.myMap.removeOverlay(markerObject.gmarker);
}
this.markerList = new Array();
}
App.prototype.OnKeep = function(result) {
if (result.__markerObject__) {
markerObject = result.__markerObject__;
this.OnMarkerClick(markerObject);
}
}
App.prototype.OnMarkerClick = function(markerObject) {
this.myMap.closeInfoWindow();
var htmlNode = markerObject.result.html.cloneNode(true);
markerObject.gmarker.openInfoWindow(htmlNode);
}
function method_closure(object, method, opt_argArray) {
return function() {
return method.apply(object, opt_argArray);
}
}
//搜索
function search(){
var keyword=document.getElementByIdx_x('keyword').value;
OnLoad(keyword);
}
//打印結果
function printResult(title,address,lat,lng){
var str="*"+title+" "+address+" "+lat+","+lng+"<br/>";
document.getElementByIdx_x('resulrdiv').innerHTML+=str;
}
</script>
</head>
<body>
<table>
<tr>
<td class="map"><div id="mapDiv">Loading...</div></td>
<td class="search-control"><div id="searchcontrol">Loading...</div></td>
<td><div id="resulrdiv">結果坐標點：<br/></div></td>
</tr>
<tr><div>
<INPUT TYPE="text" id="keyword" NAME="keyword" size="40" value="銀行"/><INPUT TYPE="button" VALUE="搜索" ONCLICK="search();">
</div></tr>
</table>
</body>
</html>
總結
以上是生活随笔為你收集整理的Google 本地搜索 实例的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Java线程池有哪些作用
- 下一篇： 删除github上的commit历史记录