Google Map Api和GOOGLE Search Api整合实现代码_Javascript教程-查字典教程网
Google Map Api和GOOGLE Search Api整合实现代码
Google Map Api和GOOGLE Search Api整合实现代码
发布时间:2016-12-30 来源:查字典编辑
摘要:将GOOGLEMAPAPI和GOOGLESearchAPI进行整合,我用面向对象的方式写了一个类,通过传一个经纬度进去,自动通过GOOGLE...

将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();

点击这里查看演示示例:经纬度查询整合本地搜索

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类