google map api与jquery结合使用
Google Maps JavaScript API可以让您在自己的网页上使用Google地图.在使用API之前,您应该先申请一个API key,申请API key请到:http://code.google.com/apis/maps/signup.html。
关于jquery的获取不再此处累赘,网上有许多关于jquery的介绍。接着我们就使用JQuery和Google Maps JavaScript API来结合表现一下google map的有趣的地图效果,进而达到熟悉Google Maps JavaScript API的目标。
先来个HelloChina:
(1)在html文件中编写html代码:
map.html
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> <!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>
在js文件中编写js代码
map.js
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!'); } }); $(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!'); }
在地址栏输入页面对应的地址(确定key是和你输入地址或域名匹配的),查看效果图,可以看到中国位于地图的中央。
地图的移动和变换
(1)修改javascript代码如下:
map.js
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!'); } }); $(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
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!'); } }); $(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
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
$(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!'); } }); $(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!'); } });
此时的地图在滚动滚轮的时候会发生伸缩,而拖动完地图后,地图左侧的坐标信息会跟着变。