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 24小时弹出一次的代码(利用cookies)
Sep 03 Javascript
JS面向对象基础讲解(工厂模式、构造函数模式、原型模式、混合模式、动态原型模式)
Aug 16 Javascript
使用AngularJS创建自定义的过滤器的方法
Jun 18 Javascript
chrome调试javascript详解
Oct 21 Javascript
js正则表达式验证邮件地址
Nov 12 Javascript
JavaScript SHA-256加密算法详细代码
Oct 06 Javascript
关于JavaScript中的this指向问题总结篇
Jul 23 Javascript
使用Vue开发一个实时性时间转换指令
Jan 17 Javascript
elementUI中Table表格问题的解决方法
Dec 04 Javascript
微信提示 在浏览器打开 效果实现过程解析
Sep 10 Javascript
解决layui laydate 时间控件一闪而过的问题
Sep 28 Javascript
微信小程序实现点击按钮后修改颜色
Dec 05 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
虫族 Zerg 热键控制
2020/03/14 星际争霸
php UTF-8、Unicode和BOM问题
2010/05/18 PHP
php实现的九九乘法口诀表简洁版
2014/07/28 PHP
简单谈谈php浮点数精确运算
2016/03/10 PHP
PHP实现根据数组的值进行分组的方法
2017/04/20 PHP
CSS3画一个阴阳八卦图
2021/03/09 HTML / CSS
Mootools 1.2教程 滑动效果(Slide)
2009/09/15 Javascript
IE iframe的onload方法分析小结
2010/01/07 Javascript
JS+DIV实现鼠标划过切换层效果的实例代码
2013/11/26 Javascript
用jquery写的一个万年历(自写)
2014/01/20 Javascript
jquery动态调整div大小使其宽度始终为浏览器宽度
2014/06/06 Javascript
js随机生成字母数字组合的字符串 随机动画数字
2015/09/02 Javascript
JS中JSON对象和String之间的互转及处理技巧
2016/04/06 Javascript
使用JS实现图片展示瀑布流效果(简单实例)
2016/09/06 Javascript
浅谈Angular中ngModel的$render
2016/10/24 Javascript
JS中页面与页面之间超链接跳转中文乱码问题的解决办法
2016/12/15 Javascript
微信小程序组件 contact-button(客服会话按钮)详解及实例代码
2017/01/10 Javascript
vue源码解析之事件机制原理
2018/04/21 Javascript
JS实现常见的查找、排序、去重算法示例
2018/05/21 Javascript
vue项目打包部署_nginx代理访问方法详解
2018/09/20 Javascript
jQuery带控制按钮轮播图插件
2020/07/31 jQuery
[02:02]特效爆炸!DOTA2珍宝之瓶待你开启
2018/08/21 DOTA
Python切片知识解析
2016/03/06 Python
python做量化投资系列之比特币初始配置
2018/01/23 Python
python数字图像处理之高级形态学处理
2018/04/27 Python
简单了解Python多态与属性运行原理
2020/06/15 Python
荷兰网上鞋店:Ziengs.nl
2017/01/02 全球购物
韩国美国时尚服装和美容在线全球市场:KOODING
2018/11/07 全球购物
JAVA代码查错题
2014/10/10 面试题
大学生简历的个人自我评价
2013/12/04 职场文书
早读迟到检讨书
2014/01/24 职场文书
舞蹈比赛获奖感言
2014/02/04 职场文书
应届生求职信范文
2014/05/26 职场文书
团代会闭幕词
2015/01/28 职场文书
关于开学的感想
2015/08/10 职场文书
Python编写可视化界面的全过程(Python+PyCharm+PyQt)
2021/05/17 Python