当前位置: 首页 > 图文教程 > 网络编程 > Javascript > Google Map Api和GOOGLE Search Api整合实现代码

Javascript
jQuery Selectors(选择器)的使用(七、子元素篇)
jquery 事件执行检测代码
javascript 支持页码格式的分页类
javascript tabIndex属性
jquery tablesorter.js 支持中文表格排序改进
javascript 返回数组中不重复的元素
javascript 文字上下间隔滚动的代码 符合WEB标准 脚本之家修正版
jQuery 开天辟地入门篇一
jMessageBox 基于jQuery的窗口插件
用javascript获取当页面上鼠标光标位置和触发事件的对象的代码
javascript实现的textarea运行框效果代码 不用指定id批量指定
测试你的JS的掌握程度的代码
js 与或运算符 || && 妙用
模仿JQuery.extend函数扩展自己对象的js代码
json 介绍 js简单实例
Ext.MessageBox工具类简介
ASP小贴士/ASP Tips javascript tips可以当桌面
勾选时激活input 否则禁用的javascript代码
javascript 输入文本框时的友好提示
jValidate 基于jQuery的表单验证插件

Javascript 中的 Google Map Api和GOOGLE Search Api整合实现代码


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-10-12   浏览: 471 ::
收藏到网摘: n/a

将GOOGLE MAP API 和 GOOGLE Search API 进行整合,我用面向对象的方式写了一个类,通过传一个经纬度进去,自动通过GOOGLE LOCAL SEARCH获取附近的相关信息。比如餐厅、景点等,反过来标到地图上,并可在任意容器内显示。

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

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