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 相关文章推荐
Jquery ui css framework
Jun 28 Javascript
javascript hasFocus使用实例
Jun 29 Javascript
jquery插件之信息弹出框showInfoDialog(成功/错误/警告/通知/背景遮罩)
Jan 09 Javascript
jquery 提交值不为空的元素示例代码
May 10 Javascript
关于javascript模块加载技术的一些思考
Nov 28 Javascript
js数组的操作指南
Dec 28 Javascript
angularjs中ng-attr的用法详解
Dec 31 Javascript
gulp加批处理(.bat)实现ng多应用一键自动化构建
Feb 16 Javascript
基于js实现判断浏览器类型代码实例
Jul 17 Javascript
JS面向对象实现飞机大战
Aug 26 Javascript
JavaScript实现多球运动效果
Sep 07 Javascript
vue中template的三种写法示例
Oct 21 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
提问的智慧
2006/10/09 PHP
PHP的中问验证码
2006/11/25 PHP
php随机获取金山词霸每日一句的方法
2015/07/09 PHP
thinkphp隐藏index.php/home并允许访问其他模块的实现方法
2016/10/13 PHP
php unlink()函数使用教程
2018/07/12 PHP
PHP安装扩展mcrypt以及相关依赖项深入讲解
2021/03/04 PHP
showModalDialog 和 showModelessDialog
2007/01/22 Javascript
javascript Base类 包含基本的方法
2009/07/22 Javascript
JavaScript 轻松搞定快捷留言功能 只需一行代码
2010/04/01 Javascript
JQuery动态创建DOM、表单元素的实现代码
2011/08/09 Javascript
JS随机漂浮广告代码具体实例
2013/11/19 Javascript
JavaScript fontcolor方法入门实例(按照指定的颜色来显示字符串)
2014/10/17 Javascript
使用AngularJS中的SCE来防止XSS攻击的方法
2015/06/18 Javascript
标准的js无缝滚动效果
2016/08/30 Javascript
angularjs中ng-bind-html的用法总结
2017/05/23 Javascript
vue bootstrap小例子一枚
2017/06/09 Javascript
快速对接payjq的个人微信支付接口过程解析
2019/08/15 Javascript
24行JavaScript代码实现Redux的方法实例
2019/11/17 Javascript
[00:10]神之谴戒
2019/03/06 DOTA
Python字符串逐字符或逐词反转方法
2015/05/21 Python
python仿抖音表白神器
2019/04/08 Python
Python3.6中Twisted模块安装的问题与解决
2019/04/15 Python
Pandas_cum累积计算和rolling滚动计算的用法详解
2019/07/04 Python
Python循环结构的应用场景详解
2019/07/11 Python
django中使用Celery 布式任务队列过程详解
2019/07/29 Python
python实现在内存中读写str和二进制数据代码
2020/04/24 Python
Jupyter notebook如何实现指定浏览器打开
2020/05/13 Python
python自定义函数def的应用详解
2020/06/03 Python
社区党总支书记先进事迹材料
2014/01/24 职场文书
社会实践活动总结
2015/02/05 职场文书
教师节感想
2015/08/11 职场文书
2015年幼师个人工作总结
2015/10/15 职场文书
2016年八一建军节活动总结
2016/04/05 职场文书
windows安装python超详细图文教程
2021/05/21 Python
雄兵连:第三季先行图公开,天使恶魔联合,银河之力的新力量
2021/06/11 国漫
vue el-table实现递归嵌套的示例代码
2022/08/14 Vue.js