日期：2012-6-7??來源：GBin1.com

在線演示1? 在線演示2? 本地下載

無容置疑，Google地圖絕對是一款強大的地圖解決方案，而且在web開發中的應用也非常廣泛，API也比較友好，使用簡單，但是作為web開發人員來說，我們喜歡更簡單的來實現自己需要的功能。以前的文章中我們介紹過jQuery的地圖插件-Jmapping，今天這里我們將介紹另外一款不錯的jQuery插件： GMaps.js，這個jQuery插件擁有超豐富的特性，相信能夠使用更少的代碼寫出更豐富的應用。

主要特性：

• 使用非常簡單，只需要使用少量代碼就可以生成豐富的地圖功能
• 支持基本地圖，地圖事件，地圖標記
• 地圖服務
• 支持浮動層，路線圖
• 支持地圖路線，行車路線
• 支持靜態地圖
• 更多的工具應用
• 需要jQuery類庫支持

如何使用

使用超簡單，引用google地圖類庫，jQuery類庫和Gmap類庫，如下：

? <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script><script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script><script type="text/javascript" src="js/gmaps.js"></script>

地圖代碼如下：

??? var map;$(document).ready(function(){map = new GMaps({div: '#map',lat: 39.908403,lng: 116.397529});map.drawRoute({origin: [39.908403, 116.397529],destination: [39.949309, 116.393559],travelMode: 'walking',strokeColor: '#000',strokeOpacity: 0.6,strokeOpacity: 0.6,strokeWeight: 6});});

以上代碼將生成一個步行路線圖。

使用Gmap生成一個動態的行車路線圖

在這里例子中，我們將使用Gmap生成兩個路線圖，代碼如下：

javascript

??? var map;$(document).ready(function(){map = new GMaps({div: '#map',lat: 39.908403,lng: 116.397529});$('#start_travel').click(function(e){e.preventDefault();map.travelRoute({origin: [39.908403, 116.397529],destination: [39.949309, 116.393559],travelMode: 'driving',step: function(e){$('#instructions').append('<li>'+e.instructions+'</li>');$('#instructions li:eq('+e.step_number+')').delay(450*e.step_number).fadeIn(200, function(){map.setCenter(e.end_location.lat(), e.end_location.lng());map.drawPolyline({path: e.path,strokeColor: '#131540',strokeOpacity: 0.6,strokeWeight: 6});});}});});});

以上代碼中，我們定義了首先定義了地圖中心經緯度坐標，這里我們使用天安門的地圖坐標。

當點擊”開始導航“按鈕后，我們將調用動態方式來展示行車路線圖，并且添加具體行車路徑到行車說明中。

HTML

HTML很簡單，定義了地圖容器和行車說明容器，還有按鈕，如下：

? <div id="header"><h1>交通路線演示 - 動態行車</h1></div><div id="body"><h3>行車 / 天安門 - 鼓樓橋</h3><div class="row"><div class="span11"><div class="popin"><div id="map"></div></div><div class="row"><a href="#" id="start_travel">開始導航</a><ul id="instructions"></ul></div></div></div></div>

CSS

body{background: #202020;color: #EEE;font-family: "Microsoft Yahei", arial; }h1{font-size:28px; }h3{font-size:18px; }#header{margin: 0 auto;width: 600px;padding-top: 50px; }#body{margin: 0 auto;width: 600px; }#map {background: none repeat scroll 0 0 #6699CC;height: 400px;width: 600px;border: 5px;box-shadow: 0px 0px 15px #EEE; }#instructions{color: #808080; }.row{margin: 30px 0px;pading: 10px; }#start_travel{background: #000;color: #909090;padding: 5px 10px;border: 5px solid #303030;border-radius: 5px 5px 5px 5px;text-decoration: none; }

搞定！是不是很簡單，如果你自己使用google maps的API書寫，肯定會覺得非常痛苦，當然，這只是冰山一角，更多的演示，請查看插件的主頁。希望大家喜歡這個插件！

來源：分享一款超棒的jQuery Google地圖插件：Gmaps

總結

以上是生活随笔為你收集整理的分享一款超棒的jQuery Google地图插件：Gmaps的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。