用谷歌地图创建谷歌地图


如何使用GMaps.js

GMaps是一个javascript插件,非常容易使用GoogleMaps向用户显示地图。有多个选项,可以轻松添加指向地图、方向、信息框等的指针。

这个插件非常庞大,有很多选项需要完成,在本教程中,我不会一一介绍。我只是要检查一下你最有可能使用的选项。

如果您想查看这个插件的所有选项,您可以查看Github存储库中的文档。

Documentation

要开始使用GMap.js,您需要从Github下载最新版本。

Download GMap

一旦你有了最新的,现在在你的页面中包含Javascript文件和jQuery

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="gmaps.js"></script>
</head>
<body>
</body>
</html>

将gmap.js添加到页面时,它将创造一个叫做GMaps的Javascript对象,您将使用它来创造你的地图
$(document).ready(function(){
 var map = new GMaps({
    el: '#map',
    lat: 51.5073346,
    lng: -0.1276831,
  });
});

基本地图

在这个例子中,它只是一个div中的基本地图。这是使用GMaps.js最简单的方法,你只需要一点Javascript和页面上的div。

首先,我们将GMap Javascript文件添加到页面中,如上图所示创造一个超文本标记语言分区。

<div id="basic_map"></div>

现在我们可以了创造Javascript向页面添加一个基本地图,对于这个地图,我们将设置地图的中心来显示伦敦。

我们可以分配不同的选项,包括缩放控制,街景,叠加设置等。

/**
  * Basic Map
  */
$(document).ready(function(){
 var map = new GMaps({
    el: '#basic_map',
    lat: 51.5073346,
    lng: -0.1276831,
    zoom: 12,
    zoomControl : true,
    zoomControlOpt: {
        style : 'SMALL',
        position: 'TOP_LEFT'
    },
    panControl : false,
  });
});

Basic Map Demo

地图上的鼠标事件

让您的地图响应用户交互在大多数应用程序中非常有用,这就是为什么GMap.js为您的地图包含了不同的鼠标事件。在本例中,我们将使用点击事件和拖动事件在屏幕上显示警报。

同样,超文本标记语言非常简单。

<div id="mouse_event_map"></div>

为此,我们可以使用与上面相同的地图,但是对于点击和拖动事件有不同的选项。然后,我们可以分配一个函数来运行这些不同的事件。

/**
 * Mouse Events on Maps
 */
$(document).ready(function(){
 var map = new GMaps({
    el: '#mouse_event_map',
    lat: 51.5073346,
    lng: -0.1276831,
    zoom: 12,
    zoomControl : true,
    zoomControlOpt: {
        style : 'SMALL',
        position: 'TOP_LEFT'
    },
    panControl : false,
    click: function(e){
      alert('Click event');
    },
    dragend: function(e){
      alert('Drag Event');
    }
  });
});

Mouse Events Demo

创造带信息的地图指针

我们要看的下一个特性是在精确的经度和纬度上给你的标记添加指针的能力。

有了GMap,这个功能变得非常简单,你也可以创造单击标记时将出现一个超文本标记语言信息框。

超文本标记语言也只是一个带有标识的分区表。

<div id="pointers_map"></div>

在这个例子中,我用伦敦的一些最大的景点作为地图的指针。

添加指针和使用addMarker()方法一样简单。

map.addMarker({
        lat: 51.5007396,
        lng: -0.1245299,
        title: 'Big Ben',
        infoWindow: {
          content: '
Big Ben is the nickname for the great bell of the clock at the north end of the Palace of Westminster in London, and often extended to refer to the clock and the clock tower, officially named Elizabeth Tower.
'
        }
      });

我们对从GMap类返回的对象使用这个方法。

/**
 * Map Pointers
 */
$(document).ready(function(){
 var map = new GMaps({
    el: '#pointers_map',
    lat: 51.5073346,
    lng: -0.1276831,
    zoom: 13,
    zoomControl : true,
    zoomControlOpt: {
        style : 'SMALL',
        position: 'TOP_LEFT'
    },
    panControl : false,
  });
map.addMarker({
      lat: 51.503324,
      lng: -0.119543,
      title: 'London Eye',
      infoWindow: {
        content: '
The London Eye is a giant Ferris wheel situated on the banks of the River Thames in London, England. The entire structure is 135 metres (443 ft) tall and the wheel has a diameter of 120 metres (394 ft).
' }
    });
    map.addMarker({
      lat: 51.5007396,
      lng: -0.1245299,
      title: 'Big Ben',
      infoWindow: {
        content: '
Big Ben is the nickname for the great bell of the clock at the north end of the Palace of Westminster in London, and often extended to refer to the clock and the clock tower, officially named Elizabeth Tower.
'
      }
    });
    map.addMarker({
      lat: 51.518856,
      lng: -0.1263371,
      title: 'British Museum',
      infoWindow: {
        content: '
The British Museum is a museum in London dedicated to human history and culture.
'
      }
    });
    map.addMarker({
      lat: 51.5085822,
      lng: -0.1283169,
      title: 'National Gallery',
      infoWindow: {
        content: '
The National Gallery is an art museum on Trafalgar Square, London. Founded in 1824, it houses a collection of over 2,300 paintings dating from the mid-13th century to 1900.
'
      }
    });
    map.addMarker({
      lat: 51.5228316,
      lng: -0.1553503,
      title: 'Madame Tussauds',
      infoWindow: {
        content: '
Madame Tussauds is a wax museum in London with branches in a number of major cities.
'
      }
    });
    map.addMarker({
      lat: 51.5089465,
      lng: -0.0764269,
      title: 'Tower Of London',
      infoWindow: {
        content: '
Her Majesty\'s Royal Palace and Fortress, more commonly known as the Tower of London, is a historic castle on the north bank of the River Thames in central London, England, United Kingdom.
'
      }
    });

这将创造a谷歌看起来像这样的地图。

Map Pointers Demo

使用地理定位

Geolocation will allow your browser to locate your exact longitude and latitude,这对于地图mobile devices。如果你从移动设备上问路,你很可能会从你当前的位置上问路。

有了GMap.js,我们可以很容易地在对象上使用另一个属性来获取您的位置,并在您的确切位置放置一个标记。

第一创造你的地图分区。

<div id="geolocation_map"></div>

使用下面的Javascript来创造你当前位置的标记。这在GMaps对象上使用了一种称为地理位置()的方法。

/**
 * Geolocation
 */
 var map;
$(document).ready(function(){
  var map = new GMaps({
    el: '#geolocation_map',
    lat: 51.5073346,
  lng: -0.1276831,
  });
  GMaps.geolocate({
    success: function(position){
      map.setCenter(position.coords.latitude, position.coords.longitude);
      map.addMarker({
        lat: position.coords.latitude,
        lng: position.coords.longitude,
        title: 'You are here.',
        infoWindow: {
          content: '
You are here!
'
        }
      });
    },
    error: function(error){
      alert('Geolocation failed: '+error.message);
    },
    not_supported: function(){
      alert("Your browser does not support geolocation");
    }
  });
});

Geolocation Map Demo

方向

在地理定位的前一个例子中,我谈到了使用地理定位对于人们使用方向非常有用,这样你就可以从你当前的位置获得方向。

使用GMaps.js获取地理位置和绘制方向路线都非常容易。首先,我们使用地理位置方法获取用户的当前位置,然后,我们使用绘制路线方法绘制从您当前位置到目的地的路线。

/**
 * Directions to London
 */
var map;
$(document).ready(function(){
  var map = new GMaps({
    el: '#directions_map',
    lat: 51.5073346,
    lng: -0.1276831,
    zoom:8
  });
  GMaps.geolocate({
    success: function(position){
      map.setCenter(position.coords.latitude, position.coords.longitude);
       map.drawRoute({
        origin: [position.coords.latitude, position.coords.longitude],
        destination: [51.5073346, -0.1276831],
        travelMode: 'driving',
        strokeColor: '#000',
        strokeOpacity: 0.6,
        strokeWeight: 6
      });
    },
    error: function(error){
      alert('Geolocation failed: '+error.message);
    },
    not_supported: function(){
      alert("Your browser does not support geolocation");
    }
  });
});

Directions Map Demo

静态地图

有时,当您在页面上显示地图时,您不想让用户与它进行任何交互,您只想显示一个位置的图像。

有了GMaps.js,你可以让插件显示任何位置的图像。

您可以设置您想要使用的图像的大小和位置,只需提供一个div占位符,就是这样。

/**
 * Static Maps
 */
$(document).ready(function(){
  var url = GMaps.staticMapURL({
    size: [610, 350],
    lat: -33.858290691930996,
    lng: 151.21517658233643
  });
  $('<img/>').attr('src', url).appendTo('#static_map');
});

Static Map Demo

结论

从这个示例代码中可以看出,在你的页面上使用GMap非常容易。这些只是如何使用GMap.js插件的几个例子,使用插件上所有选项的例子可以在Github项目中找到。

GMap Examples

要下载最新版本的gmap.js,您应该去Github知识库。

Download GMap