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 13 Javascript
自己开发Dojo的建议框架
Sep 24 Javascript
Prototype Selector对象学习
Jul 23 Javascript
jQueryPad 实用的jQuery测试工具(支持IE,chrome,FF)
May 22 Javascript
JS实现QQ图片一闪一闪的效果小例子
Jul 31 Javascript
关闭ie窗口清除Session的解决方法
Jan 10 Javascript
JS创建自定义表格具体实现
Feb 11 Javascript
JavaScript对IE操作的经典代码(推荐)
Mar 10 Javascript
JS上传图片预览插件制作(兼容到IE6)
Aug 07 Javascript
js时间戳和c#时间戳互转方法(推荐)
Feb 15 Javascript
浅谈Vue父子组件和非父子组件传值问题
Aug 22 Javascript
微信小程序实现页面左右滑动
Nov 16 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
10个可以简化php开发过程的MySQL工具
2010/04/11 PHP
php函数的常用方法及注意之处小结
2011/07/10 PHP
php输出1000以内质数(素数)示例
2014/02/16 PHP
PHP文件操作实例总结【文件上传、下载、分页】
2018/12/08 PHP
PHP获取真实IP及IP模拟方法解析
2020/11/24 PHP
Textarea与懒惰渲染实现代码
2012/01/04 Javascript
jquery图片播放浏览插件prettyPhoto使用详解
2014/12/19 Javascript
nodejs创建web服务器之hello world程序
2015/08/20 NodeJs
微信小程序之分享页面如何返回首页的示例
2018/03/28 Javascript
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
2018/06/05 jQuery
微信小程序仿RadioGroup改变样式的处理方案
2018/07/13 Javascript
Bootstrap-table自定义可编辑每页显示记录数
2018/09/07 Javascript
jquery分页插件pagination使用教程
2018/10/23 jQuery
Vue实现一个无限加载列表功能
2018/11/13 Javascript
vue中利用simplemde实现markdown编辑器(增加图片上传功能)
2019/04/29 Javascript
使用jQuery如何写一个含验证码的登录界面
2019/05/13 jQuery
解决Layui数据表格显示无数据提示的问题
2019/11/14 Javascript
微信小程序以7天为周期连续签到7天功能效果的示例代码
2020/08/20 Javascript
python实现巡检系统(solaris)示例
2014/04/02 Python
浅谈Python浅拷贝、深拷贝及引用机制
2016/12/15 Python
Odoo中如何生成唯一不重复的序列号详解
2018/02/10 Python
使用pandas实现csv/excel sheet互相转换的方法
2018/12/10 Python
python将txt文档每行内容循环插入数据库的方法
2018/12/28 Python
tensorflow 限制显存大小的实现
2020/02/03 Python
如何使用Cython对python代码进行加密
2020/07/08 Python
Python list和str互转的实现示例
2020/11/16 Python
 Alo Yoga官网:购买瑜伽服装
2018/06/17 全球购物
俄罗斯香水在线商店:AromaCode
2019/12/04 全球购物
道路交通安全实施方案
2014/03/12 职场文书
在校大学生自我评价范文
2014/09/12 职场文书
2015年会计工作总结范文
2015/05/26 职场文书
初二物理教学反思
2016/02/19 职场文书
《弟子规》读后感:知廉耻、明是非、懂荣辱、辨善恶
2019/12/03 职场文书
导游词之沈阳清昭陵
2019/12/28 职场文书
【海涛DOTA解说】EVE女子战队独家录像加ZSMJ神牛两连发
2022/04/01 DOTA
Redis基本数据类型Zset有序集合常用操作
2022/06/01 Redis