Google Map Api和GOOGLE Search Api整合實(shí)現(xiàn)代碼

將GOOGLE MAP API 和 GOOGLE Search API 進(jìn)行整合,我用面向?qū)ο蟮姆绞綄懥艘粋€類,通過傳一個經(jīng)緯度進(jìn)去,自動通過GOOGLE LOCAL SEARCH獲取附近的相關(guān)信息。比如餐廳、景點(diǎn)等,反過來標(biāo)到地圖上,并可在任意容器內(nèi)顯示。
下面是源碼:
/*
*Author:karry
*Version:1.0
*Time:2008-12-01
*KMapSearch 類
*把GOOGLE MAP 和LocalSearch結(jié)合。只需要傳入MAP\經(jīng)緯度值,就可以把該經(jīng)緯度附近的相關(guān)本地搜索內(nèi)容取出來,在地圖上標(biāo)注出來,并可以在指定容器顯示搜索結(jié)果
*/
(function() {
var markers= new Array();
var KMapSearch=window.KMapSearch= function(map_, opts_) {
this.opts = {
container:opts_.container || "divSearchResult",
keyWord:opts_.keyWord || "餐廳",
latlng: opts_.latlng || new GLatLng(31, 121),
autoClear:opts_.autoClear || true,
icon:opts_.icon || new GIcon(G_DEFAULT_ICON)
};
this.map = map_;
this.gLocalSearch = new google.search.LocalSearch();
this.gLocalSearch.setCenterPoint(this.opts.latlng);
this.gLocalSearch.setResultSetSize(GSearch.LARGE_RESULTSET);
this.gLocalSearch.setSearchCompleteCallback(this, function() {
if (this.gLocalSearch.results) {
var savedResults = document.getElementById(this.opts.container);
if (this.opts.autoClear) {
savedResults.innerHTML = "";
}
for (var i = 0; i < this.gLocalSearch.results.length; i++) {
savedResults.appendChild(this.getResult(this.gLocalSearch.results[i]));
}
}
});
}
KMapSearch.prototype.getResult = function(result) {
var container = document.createElement("div");
container.className = "list";
var myRadom =(new Date()).getTime().toString()+Math.floor(Math.random()*10000);
container.id=myRadom;
container.innerHTML = result.title + "<br />地址:" + result.streetAddress;
this.createMarker(new GLatLng(result.lat, result.lng), result.html,myRadom);
return container;
}
KMapSearch.prototype.createMarker = function(latLng, content)
{
var marker = new GMarker(latLng, {icon:this.opts.icon,title:this.opts.title});
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(content);
});
markers.push(marker);
map.addOverlay(marker);
}
KMapSearch.prototype.clearAll = function() {
for (var i = 0; i < markers.length; i++) {
this.map.removeOverlay(markers[i]);
}
markers.length = 0;
}
KMapSearch.prototype.execute = function(latLng) {
if (latLng) {
this.gLocalSearch.setCenterPoint(latLng);
}
this.gLocalSearch.execute(this.opts.keyWord);
}
})();
使用方法:
var myIcon = new GIcon(G_DEFAULT_ICON);
myIcon.image = "canting.png";
myIcon.iconSize = new GSize(16, 20);
myIcon.iconAnchor = new GPoint(8, 20);
myIcon.shadow = "";
var mapSearch = new KMapSearch(map, {container:"cantingContainer",latlng:initPt,icon:myIcon,keyWord:"餐廳"});
mapSearch.clearAll();
mapSearch.execute();
點(diǎn)擊這里查看演示示例:經(jīng)緯度查詢整合本地搜索
相關(guān)文章
JavaScript實(shí)現(xiàn)點(diǎn)擊改變圖片形狀(transform應(yīng)用)
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)點(diǎn)擊改變圖片形狀,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-04-04在JavaScript中獲取請求的URL參數(shù)[正則]
在ASP.NET后臺代碼中,對于這樣的URL請求地址:http://www.abc.com?id=001,我們可以通過Request.QueryString["id"]的方法很容易的獲取到URL中請求的參數(shù)的值,但是要在前臺js代碼中獲取請求的參數(shù)的值,應(yīng)該怎么做呢?2010-12-12淺談js之字面量、對象字面量的訪問、關(guān)鍵字in的用法
下面小編就為大家?guī)硪黄獪\談js之字面量、對象字面量的訪問、關(guān)鍵字in的用法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-11-11ES6擴(kuò)展運(yùn)算符的用途實(shí)例詳解
這篇文章主要介紹了ES6擴(kuò)展運(yùn)算符的用途 ,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2017-08-08使用JavaScript為Kindeditor自定義按鈕增加Audio標(biāo)簽
這篇文章主要介紹了使用JavaScript為Kindeditor自定義按鈕增加Audio標(biāo)簽的方法,KindEditor是一套開源的HTML可視化編輯器,需要的朋友可以參考下2016-03-03詳解js的事件處理函數(shù)和動態(tài)創(chuàng)建html標(biāo)記方法
本文主要對javascript的事件處理函數(shù),動態(tài)創(chuàng)建html標(biāo)記的兩種方法進(jìn)行詳細(xì)介紹,具有很好的參考價值,需要的朋友一起來看下吧2016-12-12