jquery与google map api结合使用 控件,监听器
更新时间：2010年03月04日 18:37:44 作者：
关于jquery的获取不再此处累赘，网上有许多关于jquery的介绍。
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!');
}
});
此时的地图在滚动滚轮的时候会发生伸缩，而拖动完地图后，地图左侧的坐标信息会跟着变。
个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!');
}
});
此时的地图在滚动滚轮的时候会发生伸缩，而拖动完地图后，地图左侧的坐标信息会跟着变。
相关文章
图片上传，网上有好多版本，今天小编给大家分享jquery.uploadView 实现图片预览上传功能，感兴趣的的朋友一起看看吧2017-08-08
这篇文章主要为大家详细介绍了jQuery实现网页拼图游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-11-11
在Web开发中,有时候我们需要在特定情况下将按钮置灰并设置为不可用状态,以防止用户重复点击或者暂时禁止某些操作,本文将介绍如何使用jQuery来实现这一效果,感兴趣的朋友跟着小编一起来看看吧2024-09-09
MVC Ajax Helper或Jquery异步加载部分视图
这篇文章主要介绍了MVC Ajax Helper或Jquery异步加载部分视图的相关资料,需要的朋友可以参考下2015-11-11
这篇文章主要介绍了jquery解决客户端跨域访问问题,jQuery.ajax()支持get方式的跨域，这其实是采用jsonp的方式来完成的，需要的朋友可以参考下2015-01-01
下面小编就为大家带来一篇jquery实现全选功能效果的实现代码。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
因为垃圾回收的存在，让javascript等高级语言开发者产生了一个错误的认识，以为可以不用关心内存管理,需要的朋友可以了解下2012-12-12
jquery实现的回旋滚动效果完整实例【附demo源码下载】
这篇文章主要介绍了jquery实现的回旋滚动效果,可实现点击后侧图片呈现立体翻转切换的功能,涉及jQuery插件roundabout.js的使用,并附带了完整实例demo源码供读者下载参考,需要的朋友可以参考下2016-09-09
这篇文章主要介绍了jQuery实现textarea自动增长宽高的方法,涉及jQuery针对键盘按键的响应及页面元素的动态操作技巧,需要的朋友可以参考下2015-12-12
这篇文章主要介绍了使用jQuery制作遮罩层弹出效果的极简实例分享,效果中背景为半透冥且不可操作,在制作页面上传功能等场景下十分实用,需要的朋友可以参考下2016-05-05
最新评论