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 flash下fromCharCode和charCodeAt方法使用说明
Jan 12 Javascript
Javascript 八进制转义字符(8进制)
Apr 08 Javascript
jQuery form插件的使用之处理server返回的JSON, XML,HTML数据
Jan 26 Javascript
简单解析JavaScript中的__proto__属性
May 10 Javascript
全面接触神奇的Bootstrap导航条实战篇
Aug 01 Javascript
AngularJS 2.0入门权威指南
Oct 08 Javascript
Jquery表单验证失败后不提交的解决方法
Oct 18 Javascript
微信小程序之网络请求简单封装实例详解
Jun 28 Javascript
Vue项目中最新用到的一些实用小技巧
Nov 06 Javascript
微信小程序-可移动菜单的实现过程详解
Jun 24 Javascript
vue+element获取el-table某行的下标,根据下标操作数组对象方式
Aug 07 Javascript
关于element-ui表单中限制输入纯数字的解决方式
Sep 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
绿山咖啡和蓝山咖啡
2021/03/04 新手入门
php visitFile()遍历指定文件夹函数
2010/08/21 PHP
PHP中文件缓存转内存缓存的方法
2011/12/06 PHP
百度ping方法使用示例 自动ping百度
2014/01/26 PHP
PHP远程采集图片详细教程
2014/07/01 PHP
php Imagick获取图片RGB颜色值
2014/07/28 PHP
php使用CURL伪造IP和来源实例详解
2015/01/15 PHP
PHP聊天室简单实现方法详解
2018/12/08 PHP
laravel实现查询最后执行的一条sql语句的方法
2019/10/09 PHP
php高性能日志系统 seaslog 的安装与使用方法分析
2020/02/29 PHP
js出生日期 年月日级联菜单示例代码
2014/01/10 Javascript
js常用数组操作方法简明总结
2014/06/20 Javascript
jquery调整表格行tr上下顺序实例讲解
2016/01/09 Javascript
JavaScript使用FileReader实现图片上传预览效果
2020/03/27 Javascript
angularjs 动态从后台获取下拉框的值方法
2018/08/13 Javascript
mpvue中使用flyjs全局拦截的实现代码
2018/09/13 Javascript
一份超级详细的Vue-cli3.0使用教程【推荐】
2018/11/15 Javascript
微信小程序实现图片压缩
2019/12/03 Javascript
js基于canvas实现时钟组件
2021/02/07 Javascript
[51:07]VGJ.S vs Pain 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
彻底理解Python list切片原理
2017/10/27 Python
python3中函数参数的四种简单用法
2018/07/09 Python
Python3实现的判断环形链表算法示例
2019/03/07 Python
如何安装并使用conda指令管理python环境
2019/07/10 Python
django 通过url实现简单的权限控制的例子
2019/08/16 Python
对tensorflow中cifar-10文档的Read操作详解
2020/02/10 Python
python实现发送带附件的邮件代码分享
2020/09/22 Python
使用css3实现超炫的loading加载动画效果
2014/05/07 HTML / CSS
CSS3制作酷炫的三维相册效果
2016/07/01 HTML / CSS
HTML5语义化元素你真的用对了吗
2019/08/22 HTML / CSS
国旗下讲话演讲稿
2014/05/08 职场文书
群众路线对照检查剖析材料
2014/10/09 职场文书
三人合伙协议书范本
2014/10/29 职场文书
2015元旦家电促销活动策划方案
2014/12/09 职场文书
介绍信的写法
2015/01/31 职场文书
2016年6月份红领巾广播稿
2015/12/21 职场文书