Posted in Javascript onJuly 18, 2009
将GOOGLE MAP API 和 GOOGLE Search API 进行整合,我用面向对象的方式写了一个类,通过传一个经纬度进去,自动通过GOOGLE LOCAL SEARCH获取附近的相关信息。比如餐厅、景点等,反过来标到地图上,并可在任意容器内显示。
下面是源码:
/* *Author:karry *Version:1.0 *Time:2008-12-01 *KMapSearch 类 *把GOOGLE MAP 和LocalSearch结合。只需要传入MAP\经纬度值,就可以把该经纬度附近的相关本地搜索内容取出来,在地图上标注出来,并可以在指定容器显示搜索结果 */ (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();
点击这里查看演示示例:经纬度查询整合本地搜索
Google Map Api和GOOGLE Search Api整合实现代码
声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@