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 相关文章推荐
js 编写规范
Mar 03 Javascript
range 标准化之获取
Aug 28 Javascript
JQuery实现防止退格键返回的方法
Feb 12 Javascript
使用jQuery实现WordPress中的Ctrl+Enter和@评论回复
May 21 Javascript
微信小程序实现图片轮播及文件上传
Apr 07 Javascript
深入解析js轮播插件核心代码的实现过程
Apr 14 Javascript
浅谈React前后端同构防止重复渲染
Jan 05 Javascript
jQuery的Ajax接收java返回数据方法
Aug 11 jQuery
详解原生JS动态添加和删除类
Mar 26 Javascript
详解微信小程序用定时器实现倒计时效果
Apr 30 Javascript
基于JavaScript实现十五拼图代码实例
Apr 26 Javascript
vue下载二进制流图片操作
Oct 26 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
PHP4 与 MySQL 交互使用
2006/10/09 PHP
解析PHP中DIRECTORY_SEPARATOR,PATH_SEPARATOR两个常量的作用
2013/06/21 PHP
php实现12306火车票余票查询和价格查询(12306火车票查询)
2014/01/14 PHP
PHP弹出提示框并跳转到新页面即重定向到新页面
2014/01/24 PHP
win7计划任务定时执行PHP脚本设置图解
2014/05/09 PHP
PHP静态成员变量和非静态成员变量详解
2017/02/14 PHP
CI框架附属类用法分析
2018/12/26 PHP
js 加载并解析XML字符串的代码
2009/12/13 Javascript
jquery实现的带缩略图的焦点图片切换(自动播放/响应鼠标动作)
2013/01/23 Javascript
jquery移除button的inline onclick事件(已测试及兼容浏览器)
2013/01/25 Javascript
jQuery获得内容和属性方法及示例
2013/12/02 Javascript
JavaScript中的setMilliseconds()方法使用详解
2015/06/11 Javascript
jQuery+AJAX实现无刷新下拉加载更多
2015/07/03 Javascript
jQuery Form 表单提交插件之formSerialize,fieldSerialize,fieldValue,resetForm,clearForm,clearFields的应用
2016/01/23 Javascript
学习Node.js模块机制
2016/10/17 Javascript
jQuery实现文档树效果
2017/02/20 Javascript
原生JS控制多个滚动条同步跟随滚动效果
2017/12/22 Javascript
微信小程序控制台提示warning:Now you can provide attr &quot;wx:key&quot; for a &quot;wx:for&quot; to improve performance解决方法
2019/02/21 Javascript
150行Node.js实现的dns代理工具
2019/08/02 Javascript
js实现图片无缝循环轮播
2019/10/28 Javascript
[47:12]TFT vs Secret Supermajor小组赛C组 BO3 第三场 6.3
2018/06/04 DOTA
用 Python 爬了爬自己的微信朋友(实例讲解)
2017/08/25 Python
python 获取一个值在某个区间的指定倍数的值方法
2018/11/12 Python
pycharm的console输入实现换行的方法
2019/01/16 Python
利用python将图片版PDF转文字版PDF
2019/05/03 Python
Python爬虫爬取新闻资讯案例详解
2020/07/14 Python
Python实现手绘图效果实例分享
2020/07/22 Python
如何基于Python爬虫爬取美团酒店信息
2020/11/03 Python
使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法
2016/07/08 HTML / CSS
巴黎一票通:The Paris Pass
2018/02/10 全球购物
6号汽车旅馆预订:Motel 6
2018/02/11 全球购物
Tretorn美国官网:瑞典外套和鞋类品牌,抵御风雨
2018/07/19 全球购物
美国儿童服装、家具和玩具精品店:Maisonette
2019/11/24 全球购物
法人代表身份证明书及授权委托书
2014/09/16 职场文书
廉政党课工作报告案例
2019/06/21 职场文书
南阳市白酒市场的调查报告
2019/11/08 职场文书