脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jquery google map api

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&amp;v=2&amp;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中closest和parents的区别分析

    jQuery中closest和parents的区别分析

    本文给大家介绍jquery中parents()和closest()用法与区别介绍，在jquery中parents()查找父级元素删除的时候，发现它不包含根元素，于是用了closest()，效果不错，下面我来给大家具体的介绍一下
    2015-05-05
  • 一次失败的jQuery优化尝试小结

    一次失败的jQuery优化尝试小结

    我经常抱怨jQuery的DOM操作性能并不优秀，并且经常尝试用一些方法去进行优化，但是越是优化，越是沮丧地发现jQuery其实已经做得很好，从使用者的角度能够进行的优化实在有限
    2011-02-02
  • jQuery实现form表单基于ajax无刷新提交方法实例代码

    jQuery实现form表单基于ajax无刷新提交方法实例代码

    在本篇文章里小编给大家整理了关于jQuery实现form表单基于ajax无刷新提交方法实例代码，需要的朋友们参考下。
    2019-11-11
  • jquery.lazyload 实现图片延迟加载jquery插件

    jquery.lazyload 实现图片延迟加载jquery插件

    看到了淘宝产品介绍中,图片是在下拉滚动条时加载,这是一个很不错的用户体验。减少了页面加载的时间了，也减轻了服务器的压力，就查了下用JQuery..
    2010-02-02
  • 几种二级联动案例（jQuery\Array\Ajax php）

    几种二级联动案例（jQuery\Array\Ajax php）

    这篇文章主要为大家详细介绍了几种二级联动案例（jQuery\Array\Ajax php），具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-08-08
  • 谈一谈jQuery核心架构设计

    谈一谈jQuery核心架构设计

    这篇文章主要和大家谈一谈jQuery核心架构设计，什么是jQuery核心架构设计，多方面了解jQuery核心架构设计，感兴趣的小伙伴们可以参考一下
    2016-03-03
  • 使用jquery的ajax需要注意的地方dataType的设置

    使用jquery的ajax需要注意的地方dataType的设置

    没有设置dataType:'json',就出现无法解析返回的data数据，会把data当作字符串处理，而不是json对象，记得以前是不用设dataType的，很奇怪，不知道是不是跟jquery版本有关系
    2013-08-08
  • JQuery 学习笔记 选择器之二

    JQuery 学习笔记 选择器之二

    本章继续我们的JQuery选择器的学习旅程 首先照上一章一样，提供我学习用的例子
    2009-07-07
  • JQuery通过键盘控制键盘按下与松开触发事件

    JQuery通过键盘控制键盘按下与松开触发事件

    这篇文章主要介绍了JQuery通过键盘控制键盘按下与松开触发事件，文章通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-08-08
  • jQuery列表检索功能实现代码

    jQuery列表检索功能实现代码

    要实现一个简单的列表，右上角有一个检索功能我们要实现的是列表检索功能，具体实例代码大家参考下本文
    2017-07-07

最新评论