分享一款超棒的jQuery Google地图插件：Gmaps

日期：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