使用Google Maps API和jQuery文章向地图添加标记

最新推荐文章于 2024-09-09 09:35:48 发布

dingshi7798

最新推荐文章于 2024-09-09 09:35:48 发布

阅读量136

点赞数

文章标签： javascript 数据库 ViewUI

Google Maps API为开发人员和网站管理员提供了一种将自定义交互式地图添加到其网站的复杂方法。该API的第3版（于2009年5月发布）代表该API的全面改进，以响应几年来对前一版本的用户反馈。

在本教程中，我们将向您展示如何向网站添加带有一组位置标记的地图，从而涵盖API的一些更简单的功能。每个标记都会有一个关联的信息提示框，其中包含该位置的名称和地址。而且，我们将通过Ajax加载位置数据，因此这可以用作开发更复杂的基于地图的应用程序的第一步。

例如，如果您站点的联系页面在地图上显示了所有零售地点的位置，则可以通过将这些参数发送到服务器来动态过滤（例如，基于提供某些功能或在特定日期开放的位置）并根据返回的XML在地图上显示标记。

在开始之前，您应该至少对jQuery有基本的了解。要了解有关我们将使用的任何类和方法的更多信息，您可以查阅Google Maps API参考。

在本教程中，我们将创建：

一个名为markers.html的HTML文件，该文件将用于显示地图和标记
一个名为markers.xml的XML文件，其中包含包含在name ， address ， lat和lng标记中的数据
一个名为markers.js的JavaScript文件，我们将在其中放置代码以将其加载到数据中并创建地图

您可以在此处下载完整的源代码以进行后续操作。

资料格式

在开始编写代码之前，最好检查一下用于加载位置数据的XML数据的格式。

我们要放置在地图上的每个标记的坐标和信息将包含在XML文件中。这使得更改它变得容易，或者通过服务器端脚本从数据库中提取信息来自动生成它。 XML的格式如下：

<?xml version="1.0"?><markers>
  <marker>
    <name>VODAFONE</name>
    <address>near Ghumaghumalu Restaurant, Marripalem, Visakhapatnam</address>
    <lat>17.74033553</lat>
    <lng>83.25067267</lng>
  </marker>
  <marker>
    <name>VODAFONE</name>
    <address>near Viswa Teja School, Thatichetlapalem, Visakhapatnam</address>
    <lat>17.73254774</lat>
    <lng>83.29195094</lng>
  </marker>
  ⋮
</markers>

根元素是markers ，它包含一系列marker元素，每个元素包含一个文本地址，纬度和经度。

在加载此XML并将其用于在地图上放置标记之前，我们首先需要在HTML页面中包含Google Maps JavaScript和jQuery库。

jQuery和Maps API

毫不奇怪，我们将依赖于其功能的两个库是jQuery和Google Maps API库本身。就jQuery而言，您可以简单地从jQuery主页下载最新版本并将其包含在HTML页面中，如下所示：

<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>

对于Google Maps代码，我们可以直接链接到Google服务器：

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

sensor=false参数指定我们不想使用传感器（如GPS定位器）来确定用户的位置。

现在我们有了基本库，我们可以开始构建功能。

概述脚本

让我们从地图代码的框架开始：

var MYMAP = {
  bounds: null,
  map: null
}
MYMAP.init = function(latLng, selector) {
  ⋮
}
MYMAP.placeMarkers = function(filename) {
  ⋮
}

我们将所有地图功能打包在一个名为MYMAP的JavaScript对象中，这将有助于避免与页面上其他脚本的潜在冲突。该对象包含两个变量和两个函数。 map变量将存储对将创建的Google Map对象的引用， bounds变量将存储包含我们所有标记的边界框。当我们添加了所有标记后，当我们想要缩放地图以使其同时可见时，这将非常有用。

现在介绍方法： init将在页面上找到一个元素，并将其初始化为具有给定中心和缩放级别的新Google地图。同时， placeMarkers采用XML文件的名称，并将从该文件中加载坐标数据以在地图上放置一系列标记。

载入地图

现在我们已经有了基本的结构，让我们编写init函数：

MYMAP.init = function(selector, latLng, zoom) {
  var myOptions = {
    zoom:zoom,
    center: latLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  this.map = new google.maps.Map($(selector)[0], myOptions);
  this.bounds = new google.maps.LatLngBounds();}

我们使用传递给方法的参数创建一个对象文字，以包含一组选项。然后，我们初始化在Google Maps API中定义的两个对象（一个Map和一个LatLngBounds ，并将它们分配给我们先前为此目的设置的MYMAP对象的属性。

向Map构造函数传递了一个DOM元素（用作页面上的地图）以及一组选项。我们已经准备好了这些选项，但是要检索DOM元素，我们需要传入传入的选择器字符串，并使用jQuery $函数在页面上查找项目。因为$返回的是jQuery对象而不是原始DOM节点，所以我们需要使用[0]进行深入研究：这允许我们访问“裸” DOM节点。

因此，一旦运行了此功能，我们将在页面上显示地图，并有一个空的边界框，可以随时添加标记来进行扩展。

添加标记

说到其中，让我们看一下placeMarkers函数：

MYMAP.placeMarkers = function(filename) {
  $.get(filename, function(xml){
    $(xml).find("marker").each(function(){
      var name = $(this).find('name').text();
      var address = $(this).find('address').text();
      
      // create a new LatLng point for the marker
      var lat = $(this).find('lat').text();
      var lng = $(this).find('lng').text();
      var point = new google.maps.LatLng(parseFloat(lat),parseFloat(lng));
      
      // extend the bounds to include the new point
      MYMAP.bounds.extend(point);

      // add the marker itself
      var marker = new google.maps.Marker({
        position: point,
        map: MYMAP.map
      });

      // create the tooltip and its text
      var infoWindow = new google.maps.InfoWindow();
      var html='<b>'+name+'</b><br />'+address;

      // add a listener to open the tooltip when a user clicks on one of the markers
      google.maps.event.addListener(marker, 'click', function() {
        infoWindow.setContent(html);
        infoWindow.open(MYMAP.map, marker);
      });
    });
    
    // Fit the map around the markers we added:
    MYMAP.map.fitBounds(MYMAP.bounds);
  });
}

此功能稍微复杂一点，但很容易理解。首先，我们调用jQuery的$.get方法来执行Ajax GET请求。该方法有两个参数：要请求的URL（在本例中为我们的本地XML文件），以及在请求结束时要执行的回调函数。该函数又将传递给请求的响应，在本例中为我们的XML。

jQuery对待XML与HTML完全一样，因此我们可以使用$(xml).find('marker').each( … )遍历响应XML中的每个标记元素，并在地图上为每个标记创建一个标记。

我们获取标记的名称和地址，然后为每个标记创建一个新的LatLng对象，并将其分配给一个point变量。我们扩展边界框以包括该点，然后在地图上的该位置创建标记。

我们希望每当用户单击这些标记时都出现一个工具提示气泡，并且希望它包含我们位置的名称和地址。因此，我们需要使用Maps API event.addListener方法向每个标记添加事件侦听器。不过，在此之前，我们将自己创建工具提示。在Google Maps API中，这种工具提示称为InfoWindow 。因此，我们创建了一个新的InfoWindow ，并设置了一些HTML来填充必要的信息。然后，我们添加事件监听器。只要单击其中一个标记，侦听器就会触发，并且两者都将设置InfoWindow的内容并打开它，以便在地图上可见。

最后，在添加了所有标记及其关联的事件处理程序和InfoWindows ，我们通过使用Maps API的fitBounds方法使地图适合这些标记。我们需要传递的就是我们扩展到包括每个标记的bounds对象。这样，无论在何处缩放或平移地图，地图都将始终恢复到包含我们所有标记的理想缩放级别。

绑在一起

现在我们的代码已经准备好了，让我们付诸实践。我们将使用jQuery的$('document').ready等到页面加载$('document').ready ，然后初始化地图，使用#map选择器字符串将其指向具有map id的页面元素：

$(document).ready(function() {
  $("#map").css({
    height: 500,
    width: 600
  });
  var myLatLng = new google.maps.LatLng(17.74033553, 83.25067267);
  MYMAP.init('#map', myLatLng, 11);
    $("#showmarkers").click(function(e){
    MYMAP.placeMarkers('markers.xml');
  });
});

我们还将点击事件监听器附加到#showmarkers按钮。单击该按钮后，我们将使用XML文件的URL调用placeMarkers函数。旋转一下，您会看到一组自定义标记显示在地图上。