jquery与google map api结合使用 控件,监听器
jquery与google map api结合使用 控件,监听器
发布时间:2016-12-30 来源:查字典编辑
摘要:GoogleMapsJavaScript.API可以让您在自己的网页上使用Google地图.在使用API之前,您应该先申请一个APIkey,...

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"></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教程学习
编程开发子分类