无容置疑，Google地图绝对是一款强大的地图解决方案，而且在web开发中的应用也非常广泛，API也比较友好，使用简单，但是作为web开发人员来说，我们喜欢更简单的来实现自己需要的功能。以前的文章中我们介绍过，今天这里我们将介绍另外一款不错的jQuery插件： ，这个jQuery插件拥有超丰富的特性，相信能够使用更少的代码写出更丰富的应用。

主要特性：

• 使用非常简单，只需要使用少量代码就可以生成丰富的地图功能
• 支持基本地图，地图事件，地图标记
• 地图服务
• 支持浮动层，路线图
• 支持地图路线，行车路线
• 支持静态地图
• 更多的工具应用
• 需要jQuery类库支持

如何使用

使用超简单，引用google地图类库，jQuery类库和Gmap类库，如下：

地图代码如下：

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('
'+e.instructions+'
');            $('#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很简单，定义了地图容器和行车说明容器，还有按钮，如下：

     
    
      
      交通路线演示 - 动态行车    
  
     
  
     
    
      
行车 / 天安门 - 鼓楼桥
    
      
      
       
        
        
          
         
        
        
        
        
          
         开始导航          
         
          
         
        
        
      
       
    
      
  
     

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书写，肯定会觉得非常痛苦，当然，这只是冰山一角，更多的演示，请查看插件的主页。希望大家喜欢这个插件！

来源：