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 树控件 比较好用
Jun 11 Javascript
Jquery获取元素的父容器对象示例代码
Feb 10 Javascript
JQuery中使用on方法绑定hover事件实例
Dec 09 Javascript
Javascript设计模式之观察者模式的多个实现版本实例
Mar 03 Javascript
JavaScript中this的9种应用场景及三种复合应用场景
Sep 12 Javascript
非常实用的12个jquery代码片段
Nov 02 Javascript
JS构造函数与原型prototype的区别介绍
Jul 04 Javascript
探讨AngularJs中ui.route的简单应用
Nov 16 Javascript
vue2.0开发入门笔记之.vue文件的生成和使用
Sep 19 Javascript
Vue+webpack+Element 兼容问题总结(小结)
Aug 16 Javascript
Node.js + express基本用法教程
Mar 14 Javascript
Vue实现push数组并删除的例子
Nov 01 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
Discuz板块横排显示图片的实现方法
2007/05/28 PHP
fleaphp rolesNameField bug解决方法
2011/04/23 PHP
基于php常用函数总结(数组,字符串,时间,文件操作)
2013/06/27 PHP
php setcookie(name, value, expires, path, domain, secure) 参数详解
2013/06/28 PHP
Linux下创建nginx脚本-start、stop、reload…
2014/08/03 PHP
Windows下安装PHP单元测试环境PHPUnit图文教程
2014/10/24 PHP
PHP+Mysql基于事务处理实现转账功能的方法
2015/07/08 PHP
详解WordPress中简码格式标签编写的基本方法
2015/12/22 PHP
PHP中调用C/C++制作的动态链接库的教程
2016/03/10 PHP
PHP随机数 C扩展随机数
2016/05/04 PHP
PHP环境搭建的详细步骤
2016/06/30 PHP
YII2.0框架行为(Behavior)深入详解
2019/07/26 PHP
Tab页界面 用jQuery及Ajax技术实现(php后台)
2011/10/12 Javascript
jQuery层次选择器选择元素使用介绍
2013/04/18 Javascript
JavaScript动态操作表格实例(添加,删除行,列及单元格)
2013/11/25 Javascript
关于jquery中全局函数each使用介绍
2013/12/10 Javascript
JavaScript中的单引号和双引号报错的解决方法
2014/09/01 Javascript
JS实现横向与竖向两个选项卡Tab联动的方法
2015/09/27 Javascript
JavaScript html5 canvas绘制时钟效果(二)
2016/03/27 Javascript
基于jquery实现三级下拉菜单
2016/05/10 Javascript
浅谈webpack SplitChunksPlugin实用指南
2018/09/17 Javascript
vue-cli项目无法用本机IP访问的解决方法
2018/09/20 Javascript
Vue项目查看当前使用的elementUI版本的方法
2018/09/27 Javascript
Python中字典的基础知识归纳小结
2015/08/19 Python
Python单链表简单实现代码
2016/04/27 Python
Python选课系统开发程序
2016/09/02 Python
python虚拟环境完美部署教程
2019/08/06 Python
Python识别验证码的实现示例
2020/09/30 Python
CSS3效果:自定义“W”形运行轨迹实例
2017/03/29 HTML / CSS
详解Html5原生拖拽操作
2018/01/12 HTML / CSS
La Senza官网:北美顶尖性感内衣品牌
2018/08/03 全球购物
员工试用期自我鉴定范文
2014/09/15 职场文书
2015年底工作总结范文
2015/05/15 职场文书
详解SpringBoot异常处理流程及原理
2021/06/21 Java/Android
ElementUI实现el-form表单重置功能按钮
2021/07/21 Javascript
JS前端可视化canvas动画原理及其推导实现
2022/08/05 Javascript