Google Map API と GOOGLE Search API の統合実装コード_JavaScript スキル

GOOGLE MAP API と GOOGLE Search API を統合するために、経度と緯度を渡すことで、GOOGLE LOCAL SEARCH を通じて近くの関連情報を自動的に取得するクラスをオブジェクト指向で作成しました。たとえば、レストラン、観光名所などが地図上にマークされ、任意のコンテナに表示できます。
ソース コードは次のとおりです:

コードをコピーします コードは次のとおりです:

/*
*作成者:karry
*バージョン:1.0
*時刻:2008-12-01
*KMapSearch クラス
* GOOGLE MAP と LocalSearch を組み合わせます。 MAP の経度と緯度の値を渡すだけで、その経度と緯度に近い関連するローカル検索コンテンツを取り出して地図上にマークし、指定したコンテナーに検索結果を表示できます
*/

(function( ) {
var markers= new Array();
var KMapSearch=window.KMapSearch= function(map_, opts_) {
this.opts = {
コンテナ: opts_.container || "divSearchResult "、
keyWord:opts_.keyWord || "レストラン"、
latlng: opts_.latlng || 新しい GLatLng(31, 121)、
autoClear:opts_.autoClear | true、
icon :opts_.icon || new GIcon(G_DEFAULT_ICON)
this.map = 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) {
varsavedResults = document.getElementById(this.opts.container);
if (this.opts.autoClear) {
savedResults.innerHTML = ""; >for (var i = 0 ; i
savedResults.appendChild(this.getResult(this.gLocalSearch.results[i]));
}
}) ;
}
KMapSearch.prototype.getResult = function(result) {
var コンテナ = document.createElement("div");
container.className = "リスト";
var myRadom =(new Date()).getTime().toString() Math.floor(Math.random()*10000);
container.id=myRadom;
container.innerHTML = result.title "< br />Address: " result.streetAddress;
this.createMarker(new GLatLng(result.lat, result.lng), result.html,myRadom);
}
KMapSearch.prototype.createMarker = function(latLng, content)
{
var marker = new GMarker(latLng, {icon:this.opts.icon,title:this.opts.title });
GEvent .addListener(マーカー, "クリック", function() {
マーカー.openInfoWindowHtml(コンテンツ);
マーカー.push(マーカー); .addOverlay(marker);
}
KMapSearch.prototype.clearAll = function() {
for (var i = 0; i this.map.削除オーバーレイ(マーカー[i]) ;
}
マーカー.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);シャドウ = ""; var mapSearch = new KMapSearch(map, {container:"cantingContainer",latlng:initPt,icon:myIcon,keyWord:"Restaurant"}); >mapSearch.execute();

ここをクリックしてデモの例を表示します:

経度と緯度のクエリはローカル検索を統合します