Google Map Api 및 GOOGLE Search Api 통합 구현 code_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 || new GLatLng(31, 121),
autoClear:opts_.autoClear | | true,
icon :opts_.icon || new GIcon(G_DEFAULT_ICON)
}; this.map = map_
this.gLocalSearch()
this.gLocalSearch.setCenterPoint( this.opts.latlng);
this.gLocalSearch.setResultSetSize(GSearch.LARGE_RESULTSET);
this.gLocalSearch.setSearchCompleteCallback(this, function() {
if (this. gLocalSearch.results) {
var saveResults = 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 컨테이너 = 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 컨테이너;
}
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); .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); Shadow = ""; var mapSearch = new KMapSearch(map, {container:"cantingContainer",latlng:initPt,icon:myIcon,keyWord:"Restaurant"})

mapSearch.clearAll(); >mapSearch.execute()

데모 예를 보려면 여기를 클릭하세요.

경도 및 위도 쿼리에 지역 검색이 통합됩니다