jquery与google map api结合使用 控件,监听器


Posted in Javascript onMarch 04, 2010

Google Maps JavaScript. API可以让您在自己的网页上使用Google地图.在使用API之前,您应该先申请一
个API key,申请API key请到:http://code.google.com/apis/maps/signup.html。这里假设你获取到的key是:ABQIAA。
关于jquery的获取不再此处累赘,网上有许多关于jquery的介绍。
接着我们就使用JQuery和Google Maps JavaScript. API来结合表现一下google map的有趣的地图效果,进而达到熟悉Google Maps JavaScript. API的目标。
先来个HelloChina:
(1)在html文件中编写html代码:
map.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta. http-equiv="content-type" content="text/html; charset=utf-8"/> 
<title>Google Maps 与 JQuery结合使用</title> 
<script. src="http://maps.google.com/maps?file=api&v=2&key=ABQIAA" type="text/javascript"></script> 
<script. type="text/javascript" src="jquery.js"></script> 
<script. type="text/javascript" src="map.js"></script> 
</head> 
<body> 
<div id="map" style="top:100px;left:300px;width: 600px; height: 400px"></div> 
<div id="message"></div> 
</body> 
</html>

(2)在js文件中编写js代码
map.js
$(document).ready(function() 
{ 
//检查浏览器兼容性 
if (GBrowserIsCompatible()) { 
var map = new GMap2(document.getElementById("map")); 
map.setCenter(new GLatLng(36.94, 106.08), 4);//中国的经纬度以及地方放大倍数 
map.setMapType(G_SATELLITE_MAP); 
//document卸载时触发 
$(window).unload(function (){ 
$('.').unbind(); 
GUnload(); 
}); 
}else 
{ 
alert('你使用的浏览器不支持 Google Map!'); 
} 
});

(3)在地址栏输入页面对应的地址(确定key是和你输入地址或域名匹配的),查看效果图,可以看到中国位于地图的中央。
HolloChina的效果图
地图的移动和变换
(1)修改javascript代码如下:
map.js
$(document).ready(function() 
{ 
if (GBrowserIsCompatible()) { 
var map = new GMap2(document.getElementById("map")); 
map.setCenter(new GLatLng(36.94, 106.08), 4); 
//4秒后移动 
window.setTimeout(function() { 
map.panTo(new GLatLng(35.746512259918504,78.90625)); 
}, 4000); 
$(window).unload(function (){ 
$('.').unbind(); 
GUnload(); 
}); 
}else 
{ 
alert('你使用的浏览器不支持 Google Map!'); 
} 
});

(2)输入对应的地址查看,等上4秒钟,就可以看到地图的中心移动到中国的西部(大概的位置):
地图中心移动到中国的西部
添加控件并修改地图类型
修改javascript代码如下:
map.js
$(document).ready(function() 
{ 
if (GBrowserIsCompatible()) { 
var map = new GMap2(document.getElementById("map")); 
//小型伸缩控制器 
map.addControl(new GSmallMapControl()); 
//地图类型控制器 
map.addControl(new GMapTypeControl()); 
map.setCenter(new GLatLng(36.94,106.08),4); 
//将地图设置为卫星地图 
map.setMapType(G_SATELLITE_MAP);//修改地图类型 
$(window).unload(function (){ 
$('.').unbind(); 
GUnload(); 
}); 
}else 
{ 
alert('你使用的浏览器不支持 Google Map!'); 
} 
});

刷新页面,看到的效果是卫星地图的左上角有一个小的伸缩控件,右上角是地图选择的控件
加入控件后的效果图
添加事件监听器并开启滚轮伸缩效果
修改javascript代码:
map.js
$(document).ready(function() 
{ 
if (GBrowserIsCompatible()) { 
var map = new GMap2(document.getElementById("map")); 
map.addControl(new GSmallMapControl()); 
map.addControl(new GMapTypeControl()); 
//开启滚轮伸缩效果--鼠标滚轮向前滚放大地图,反之缩小 
map.enableScrollWheelZoom(); 
//添加moveend事件监听器 
GEvent.addListener(map, "moveend", function() { 
var center = map.getCenter(); 
//在这个DIV中显示地图中心的经纬度 
$('#message').text(center.toString()); 
}); 
map.setCenter(new GLatLng(36.94,106.08),4); 
$(window).unload(function (){ 
$('.').unbind(); 
GUnload(); 
}); 
}else 
{ 
alert('你使用的浏览器不支持 Google Map!'); 
} 
});

此时的地图在滚动滚轮的时候会发生伸缩,而拖动完地图后,地图左侧的坐标信息会跟着变。
Javascript 相关文章推荐
Array.slice()与Array.splice()的返回值类型
Oct 09 Javascript
通过$(this)使用jQuery包装后的方法或属性
May 18 Javascript
Javascript学习笔记之 对象篇(三) : hasOwnProperty
Jun 24 Javascript
js监听鼠标点击和键盘点击事件并自动跳转页面
Sep 24 Javascript
JavaScript的内存释放问题详解
Jan 21 Javascript
浅谈JavaScript超时调用和间歇调用
Aug 30 Javascript
jQuery ajax 当async为false时解决同步操作失败的问题
Nov 18 Javascript
js Canvas绘制圆形时钟教程
Feb 06 Javascript
bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果
Jun 12 jQuery
vue获取当前激活路由的方法
Mar 17 Javascript
详解jQuery设置内容和属性
Apr 11 jQuery
Vue搭建后台系统需要注意的问题
Nov 08 Javascript
jquery 打开窗口返回值实现代码
Mar 04 #Javascript
jQuery入门知识简介
Mar 04 #Javascript
jQuery 获取URL参数的插件
Mar 04 #Javascript
老鱼 浅谈javascript面向对象编程
Mar 04 #Javascript
javascript实现的像java、c#之类的sleep暂停的函数代码
Mar 04 #Javascript
ExtJs之带图片的下拉列表框插件
Mar 04 #Javascript
JavaScript replace(rgExp,fn)正则替换的用法
Mar 04 #Javascript
You might like
PHP include_path设置技巧分享
2011/07/03 PHP
php基础教程 php内置函数实例教程
2012/08/21 PHP
PHP关联链接常用代码
2012/11/05 PHP
php Hex RGB颜色值互换的使用
2013/05/10 PHP
浅析memcache启动以及telnet命令详解
2013/06/28 PHP
PHP MYSQL简易交互式站点开发
2016/12/27 PHP
替换php字符串中的单引号为双引号的方法
2017/02/16 PHP
浅析PHP 中move_uploaded_file 上传中文文件名失败
2019/04/17 PHP
Laravel中validation验证 返回中文提示 全局设置的方法
2019/09/29 PHP
PHP实现长轮询消息实时推送功能代码实例讲解
2021/02/26 PHP
jquery BS,dialog控件自适应大小
2009/07/06 Javascript
jQuery Dialog 弹出层对话框插件
2010/08/09 Javascript
jquery聚焦文本框与扩展文本框聚焦方法
2012/10/12 Javascript
JS 实现导航栏悬停效果(续)
2013/09/24 Javascript
JS分页效果示例
2013/10/11 Javascript
JavaScript常用字符串与数组扩展函数小结
2016/04/24 Javascript
使用jQuery调用XML实现无刷新即时聊天
2016/08/07 Javascript
Vue.js实现简单动态数据处理
2017/02/13 Javascript
详谈jQuery.load()和Jsp的include的区别
2017/04/12 jQuery
微信小程序-滚动消息通知的实例代码
2017/08/03 Javascript
JS 实现banner图片轮播效果(鼠标事件)
2017/08/04 Javascript
Vue 通过公共字段,拼接两个对象数组的实例
2019/11/07 Javascript
js观察者模式的弹幕案例
2020/11/23 Javascript
[41:08]2014 DOTA2国际邀请赛中国区预选赛 HGT VS NE
2014/05/22 DOTA
[01:10:02]IG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
[51:53]DOTA2-DPC中国联赛 正赛 RNG vs Dragon BO3 第二场 1月24日
2021/03/11 DOTA
Python实现读取TXT文件数据并存进内置数据库SQLite3的方法
2017/08/08 Python
Python中一些不为人知的基础技巧总结
2018/05/19 Python
对numpy.append()里的axis的用法详解
2018/06/28 Python
python读取并定位excel数据坐标系详解
2019/06/26 Python
Python print不能立即打印的解决方式
2020/02/19 Python
详解CSS3:overflow属性
2020/11/17 HTML / CSS
预订从美国飞往印度的机票:MyTicketsToIndia
2017/05/19 全球购物
工作证明格式及范本
2014/09/12 职场文书
React 并发功能体验(前端的并发模式)
2021/07/01 Javascript
sentinel支持的redis高可用集群配置详解
2022/04/01 Redis