分享一款超棒的jQuery Google地图插件：Gmaps
无容置疑，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书写，肯定会觉得非常痛苦，当然，这只是冰山一角，更多的演示，请查看插件的主页。希望大家喜欢这个插件！