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 相关文章推荐
JavaScript 错误处理与调试经验总结
Aug 10 Javascript
jQuery Trim去除字符串首尾空字符的实现方法说明
Feb 11 Javascript
jQuery选择器源码解读(三):tokenize方法
Mar 31 Javascript
AngularJS单选框及多选框实现双向动态绑定
Jan 13 Javascript
很棒的js Tab选项卡切换效果
Aug 30 Javascript
Jil,高效的json序列化和反序列化库
Feb 15 Javascript
vue router路由嵌套不显示问题的解决方法
Jun 17 Javascript
switchery按钮的使用方法
Dec 18 Javascript
js最简单的双向绑定实例讲解
Jan 02 Javascript
JavaScript学习笔记之图片库案例分析
Jan 08 Javascript
使用Vue调取接口,并渲染数据的示例代码
Oct 28 Javascript
小程序wx.getUserProfile接口的具体使用
Jun 02 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生成PDF格式文件并且加密
2015/06/22 PHP
PHP基于自定义函数实现的汉字转拼音功能实例
2017/09/30 PHP
PHP实现数据库统计时间戳按天分组输出数据的方法
2017/10/10 PHP
PHP PDOStatement::errorInfo讲解
2019/01/31 PHP
php use和include区别总结
2019/10/13 PHP
php反序列化长度变化尾部字符串逃逸(0CTF-2016-piapiapia)
2020/02/15 PHP
js各种验证文本框输入格式(正则表达式)
2010/10/22 Javascript
jQuery操作select的实例代码
2012/06/14 Javascript
用按钮控制iframe显示的网页实现方法
2013/02/04 Javascript
jquery实现多级下拉菜单的实例代码
2013/10/02 Javascript
jquery toolbar与网页浮动工具条具体实现代码
2014/01/12 Javascript
jQuery实现div拖拽效果实例分析
2016/02/20 Javascript
js带闹铃功能的倒计时代码
2016/09/29 Javascript
javascript轮播图算法
2016/10/21 Javascript
JS实现浏览上传文件的代码
2017/08/23 Javascript
什么是Vue.js框架 为什么选择它?
2017/10/17 Javascript
Vue-cli中为单独页面设置背景色的实现方法
2018/02/11 Javascript
微信小程序ibeacon三点定位详解
2018/10/31 Javascript
Vue退出登录时清空缓存的实现
2019/11/12 Javascript
VSCode 配置uni-app的方法
2020/07/11 Javascript
[01:33:14]LGD vs VP Supermajor 败者组决赛 BO3 第二场 6.10
2018/07/04 DOTA
python 动态获取当前运行的类名和函数名的方法
2014/04/15 Python
python检测远程端口是否打开的方法
2015/03/14 Python
windows 下python+numpy安装实用教程
2017/12/23 Python
Python中最大最小赋值小技巧(分享)
2017/12/23 Python
Python获取CPU、内存使用率以及网络使用状态代码
2018/02/08 Python
使用OpenCV实现仿射变换—平移功能
2019/08/29 Python
python读文件的步骤
2019/10/08 Python
Python 进程操作之进程间通过队列共享数据,队列Queue简单示例
2019/10/11 Python
python绘制BA无标度网络示例代码
2019/11/21 Python
python3.x中安装web.py步骤方法
2020/06/23 Python
咖啡厅商业计划书
2014/09/15 职场文书
群众路线剖析材料怎么写
2014/10/09 职场文书
幼儿园亲子活动感想
2015/08/07 职场文书
教你如何用python开发一款数字推盘小游戏
2021/04/14 Python
Java+swing实现抖音上的表白程序详解
2022/06/25 Java/Android