代码改变世界

Google Maps Overlays叠加层

2012-09-27 00:23  youxin  阅读(1319)  评论(0)  编辑  收藏  举报

叠加层概述

叠加层是地图上与纬度/经度坐标绑定的对象，会随您拖动或缩放地图而移动。叠加层表示的是“添加”到地图中以标明点、线、区域或对象集合的对象。

Google Maps API 包含以下几种叠加层：

  • 地图上的单个位置显示为标记。标记有时可显示自定义的图标图片，此时标记通常被称为“图标”。标记和图标是 Marker 类型的对象。（有关详细信息，请参见下面的标记和图标。）
  • 地图上的线显示为折线（表示一系列按顺序排列的位置）。线是 Polyline 类型的对象。（有关详细信息，请参见折线。）
  • 地图上的不规则形状区域显示为 多边形，多边形类似于折线。与折线相同的是，多边形也是由一系列按顺序排列的位置构成的；不同的是，多边形定义的是封闭区域。（有关详细信息，请参见下面的多边形。）
  • 地图图层可显示为叠加层地图类型。您可以通过创建自定义地图类型以创建自己的图块集，该自定义地图类型可取代基本地图图块集，或作为叠加层显示在现有基本地图图块集之上。（有关详细信息，请参见自定义地图类型。）
  • 信息窗口也是特殊类型的叠加层，用于在指定地图位置的一个弹出式气泡框内显示内容（通常是文字或图片）。（有关详细信息，请参见信息窗口。）
  • 您还可以实现自己的自定义叠加层。这些自定义叠加层会实现 OverlayView 接口。（有关详细信息，请参见自定义叠加层。）

添加叠加层

叠加层通常在构造时添加到地图中。所有叠加层都会定义构造中所用的 Options 对象，以指定应显示叠加层的地图。您也可以使用叠加层的 setMap() 方法，将其传递给要添加叠加层的地图，从而直接在地图上添加叠加层。

var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
  var myOptions = {
    zoom: 4,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
  }
 var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    
 var marker = new google.maps.Marker({
      position: myLatlng,
      title:"Hello World!"
  });
  
  // To add the marker to the map, call setMap();
  marker.setMap(map);

 

删除叠加层

要从地图上删除叠加层，可调用叠加层的 setMap() 方法，传递 null。请注意，调用此方法不会删除叠加层，而只是从地图上删除叠加层。如果您要删除叠加层，则应当从地图上删除叠加层，然后将叠加层设置为 null。

如果您要管理一组叠加层，则应当创建一个数组以存储这些叠加层。使用数组后，只要您需要删除叠加层，就可以对数组中的每个叠加层调用 setMap()。（请注意，与第 2 版不同，该版本中未提供 clearOverlays() 方法。对于跟踪叠加层并在不需要时将其从地图中删除的任务，您需要自己执行。）要删除叠加层，您可以从地图上删除叠加层并将数组的 length 设置为 0，但此操作会删除对叠加层的所有引用。

下面示例的效果是点击地图时将标记放在地图上，然后将标记放入数组中。叠加层稍后可以删除、显示或删除：

var map;
var markersArray = [];

function initialize() {
  var haightAshbury = new google.maps.LatLng(37.7699298, -122.4469157);
  var mapOptions = {
    zoom: 12,
    center: haightAshbury,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };
  map =  new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

  google.maps.event.addListener(map, 'click', function(event) {
    addMarker(event.latLng);
  });
}
  
function addMarker(location) {
  marker = new google.maps.Marker({
    position: location,
    map: map
  });
  markersArray.push(marker);
}

// Removes the overlays from the map, but keeps them in the array
function clearOverlays() {
  if (markersArray) {
    for (i in markersArray) {
      markersArray[i].setMap(null);
    }
  }
}

// Shows any overlays currently in the array
function showOverlays() {
  if (markersArray) {
    for (i in markersArray) {
      markersArray[i].setMap(map);
    }
  }
}

// Deletes all markers in the array by removing references to them
function deleteOverlays() {
  if (markersArray) {
    for (i in markersArray) {
      markersArray[i].setMap(null);
    }
    markersArray.length = 0;
  }
}

部分html代码：

<div>
<input onclick="clearOverlays();" type=button value="Clear Overlays">
<input onclick="showOverlays();" type=button value="Show All Overlays">
<input onclick="deleteOverlays();" type=button value="Delete Overlays">
</div>

 

动画

您也可以对标记添加动画效果，以便它们在各种不同的环境中展现动态活动。为标记添加动画的方式可以在标记的 animation 属性（属于 google.maps.Animation 类型）内指定。系统目前支持以下 Animation 值：

  • DROP 表明标记在首次放置于地图上时，应当从地图顶端落到目标位置。当标记停止时动画也会立即结束，且 animation 将会还原为 null（这点要注意，首次出现后animation就为null）。通常，此类动画会在创建 Marker 的过程中指定。
  • BOUNCE 表明标记应在相应的位置上“弹跳”。在您将弹跳标记的 animation 属性设置为 null 之前，该标记会不断弹跳。

您可以在 Marker 对象上调用 setAnimation()，以对现有标记添加动画效果。

以下示例在瑞典斯德哥尔摩市创建了一个采用 DROP 动画的标记。点击该标记可使其在 BOUNCE 动画和无动画之间切换：

var stockholm = new google.maps.LatLng(59.32522, 18.07002);
var parliament = new google.maps.LatLng(59.327383, 18.06747);
var marker;
var map;

function initialize() {
  var mapOptions = {
    zoom: 13,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: stockholm
  };

  map = new google.maps.Map(document.getElementById("map_canvas"),
      mapOptions);

  marker = new google.maps.Marker({
    map:map,
    draggable:true,
    animation: google.maps.Animation.DROP,
    position: parliament
  });
  google.maps.event.addListener(marker, 'click', toggleBounce);
}

function toggleBounce() {

  if (marker.getAnimation() != null) {
    marker.setAnimation(null);
  } else {
    marker.setAnimation(google.maps.Animation.BOUNCE);
  }
}

 

请注意：如果您有很多标记，则不应让所有标记同时掉落到地图上。您可以利用 setTimeout()，使用某种模式（类似于以下示例中所示）来间隔显示标记的动画效果：

function drop() {
  for (var i =0; i < markerArray.length; i++) {
    setTimeout(function() {
      addMarkerMethod();
    }, i * 200);
  }
}
 <script>
      var berlin = new google.maps.LatLng(52.520816, 13.410186);

      var neighborhoods = [
        new google.maps.LatLng(52.511467, 13.447179),
        new google.maps.LatLng(52.549061, 13.422975),
        new google.maps.LatLng(52.497622, 13.396110),
        new google.maps.LatLng(52.517683, 13.394393)
      ];

      var markers = [];
      var iterator = 0;

      var map;

      function initialize() {
        var mapOptions = {
          zoom: 12,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          center: berlin
        };

        map = new google.maps.Map(document.getElementById('map_canvas'),
                mapOptions);
      }

      function drop() {
        for (var i = 0; i < neighborhoods.length; i++) {
          setTimeout(function() {
            addMarker();
          }, i * 200);
        }
      }

      function addMarker() {
        markers.push(new google.maps.Marker({
          position: neighborhoods[iterator],
          map: map,
          draggable: false,
          animation: google.maps.Animation.DROP
        }));
        iterator++;
      }
    </script>
  </head>
  <body onload="initialize()">
    <div id="map_canvas" style="width: 500px; height: 400px;">map div</div>
    <button id="drop" onclick="drop()">Drop Markers</button>
  </body>

 

图标

标记可以定义要显示的图标，从而取代默认的图标。定义图标的过程中包含设置若干可定义标记视觉行为的属性。

简单图标

就最基本的情况而言，只需将标记的 icon 属性设置为某一图像的网址，图标便可指明要使用的图像（而非默认的 Google Maps 图钉图标）。在这种情况下，Google Maps API 将会自动调整图标的大小。

在以下示例中，我们会创建一个图标，用于标示澳大利亚悉尼的邦迪海滩的位置：

function initialize() {
  var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
  var myOptions = {
    zoom: 4,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

  var image = 'beachflag.png';
  var myLatLng = new google.maps.LatLng(-33.890542, 151.274856);
  var beachMarker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      icon: image
  });
}

 

 

 

折线

Polyline 类可定义地图上已连接线段的线叠加层。Polyline 对象包含一组 LatLng 位置，并绘制一系列线段，以便按顺序连接这些位置。

折线选项

Polyline 构造函数采用一组 Polyline options（用于指定线的 LatLng 坐标）和一组样式（用于调整折线的可视行为）。

Polyline 就是在地图上绘制的一系列直线段线。您可以在构造线时所用的 Polyline options 对象内指定线的笔触的自定义颜色、粗细和不透明度，或在构造之后更改这些属性。折线支持以下笔触样式：

  • strokeColor 指定 "#FFFFFF" 格式的十六进制 HTML 颜色。Polyline 类不支持颜色名称。
  • strokeOpacity 指定线的颜色不透明度，为 0.0 到 1.0（默认值）之间的小数值。
  • strokeWeight 指定线的笔触粗细（以像素为单位）。

以下代码段绘制一条粗细为 2 像素的红色折线，连接威廉·金斯福德·史密斯 (William Kingsford Smith) 从美国加利福尼亚州奥克兰到澳大利亚布里斯班的首次跨太平洋飞行路线。

function initialize() {
  var myLatLng = new google.maps.LatLng(0, -180);
  var myOptions = {
    zoom: 3,
    center: myLatLng,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };

  var map = new google.maps.Map(document.getElementById("map_canvas"),
      myOptions);
  var flightPlanCoordinates = [
    new google.maps.LatLng(37.772323, -122.214897),
    new google.maps.LatLng(21.291982, -157.821856),
    new google.maps.LatLng(-18.142599, 178.431),
    new google.maps.LatLng(-27.46758, 153.027892)
  ];
  var flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 2
  });

  flightPath.setMap(map);
}

折线数组

折线将一系列坐标指定为 LatLng 对象的数组。要检索这些坐标，可调用 Polyline 的 getPath()，它会传回 MVCArray 类型的数组。同样，您可以使用以下操作处理和检查数组：

  • getAt() 用于在指定的索引值（从零开始）处传回 LatLng。
  • insertAt() 用于在指定索引值（从零开始）处插入所传递的 LatLng。注意，该索引值的所有现有坐标均向前移动。
  • removeAt() 用于在指定的索引值（从零开始）处删除 LatLng。

 注意：不能只是使用语法 mvcArray[i] 检索数组的第 i 个元素，而必须使用 mvcArray.getAt(i)。

以下代码创建了一幅交互式地图，其中的折线是根据用户的点击构造的。请注意，只有当折线的 path 属性包含两个 LatLng 坐标时，折线才会显示。

 

 ...........................................

 

地面叠加层

多边形在表示不规则的区域时很有用，但不能显示图片。如果要在地图上放置一幅图片，可以使用 GroundOverlay 对象。 GroundOverlay 的构造函数采用图片的网址和 LatLngBounds 作为参数。图片将渲染在地图上的指定边界内，并与地图的投影一致。

下面的示例将新泽西州纽瓦克的一幅老地图作为叠加层放在地图上：

 

var newark = new google.maps.LatLng(40.740, -74.18);
var imageBounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(40.716216,-74.213393),
    new google.maps.LatLng(40.765641,-74.139235));

var myOptions = {
  zoom: 13,
  center: newark,
  mapTypeId: google.maps.MapTypeId.ROADMAP
}

var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

var oldmap = new google.maps.GroundOverlay(
    "http://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg",
    imageBounds);
oldmap.setMap(map);

查看示例 (groundoverlay-simple.html)

 

信息窗口

InfoWindow 在地图上方的浮动窗口中显示内容。信息窗口有点像漫画书上的文字气球，它有一个内容区域和锥形引线，引线的头位于地图的指定位置上。通过点击 Google Maps 上的商户标记，您可以看到活动的信息窗口。

InfoWindow 构造函数采用的是 InfoWindow options 对象，该对象指定了用于显示信息窗口的一组初始参数。在创建信息窗口的过程中，系统不会在地图上添加信息窗口。要显示信息窗口，您需要调用 InfoWindow 上的 open() 方法，向其传递要在其中打开信息窗口的 Map，以及向其传递用于锚定信息窗口的 Marker（可选）。（如果未提供任何标记，那么，会在其 position 属性上打开信息窗口）。

InfoWindow options 对象是包含以下字段的对象常量：

  • content 包含了信息窗口打开时，系统要在其中显示的文本字符串或 DOM 节点。
  • pixelOffset 包含了从信息窗口的顶部到信息窗口锚定位置的偏移量。实际上，您不应也无需修改此字段。
  • position 包含了此信息窗口锚定位置的 LatLng。请注意，在标记上执行打开信息窗口操作时，系统会自动使用一个新位置更新该值。
  • maxWidth 指定了信息窗口的最大宽度（以像素为单位）。默认情况下，信息窗口会根据其中包含的内容进行扩展，如果信息窗口随着地图的大小而扩展，那么，文本将会自动换行。如果您应用了 maxWidth，那么，信息窗口将自动换行以强制适应像素的宽度。如果屏幕的实际使用面积允许的话，信息窗口在达到最大宽度后仍可垂直扩展。

InfoWindow 的内容可以是文本字符串、HTML 代码段或 DOM 元素本身。要设置此内容，请在 InfoWindow options 构造函数中传递该内容，或者对信息窗口显式调用 setContent()。如果想要显式调整内容的大小，您可以使用 <div> 进行此操作，如果您希望，还可以启用滚动功能。请注意，如果您没有启用滚动功能，而内容的大小又超过了信息窗口的可用空间，那么，内容可能会从信息窗口中“溢”出。

InfoWindow 可附加到 Marker 对象（在这种情况下，它们的位置取决于标记的位置）上，或附加到地图本身指定的 LatLng 位置上。如果您一次只想显示一个信息窗口（正如 Google Maps 上的相应行为），那么，您只需创建一个信息窗口，然后在地图事件（例如用户点击）执行过程中将此信息窗口重新分配到不同的位置或标记中。但与 Google Maps API 第 2 版中的相应行为不同的是，如果您选择进行上述操作，那么，地图可能会立即显示多个 InfoWindow 对象。

要更改信息窗口的位置，您可以对信息窗口调用 setPosition() 以显式的方式更改其位置，或者使用 InfoWindow.open() 方法将信息窗口附加到新标记上。请注意，如果您在没有传递标记的情况下调用了 open()，那么，InfoWindow 将会使用在构建过程中通过 InfoWindow options 对象指定的位置。

以下代码显示了澳大利亚中心位置的标记。点击该标记可显示信息窗口。

 

var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var myOptions = {
  zoom: 4,
  center: myLatlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
}

var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

var contentString = '<div id="content">'+
    '<div id="siteNotice">'+
    '</div>'+
    '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
    '<div id="bodyContent">'+
    '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
    'sandstone rock formation in the southern part of the '+
    'Northern Territory, central Australia. It lies 335 km (208 mi) '+
    'south west of the nearest large town, Alice Springs; 450 km '+
    '(280 mi) by road. Kata Tjuta and Uluru are the two major '+
    'features of the Uluru - Kata Tjuta National Park. Uluru is '+
    'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
    'Aboriginal people of the area. It has many springs, waterholes, '+
    'rock caves and ancient paintings. Uluru is listed as a World '+
    'Heritage Site.</p>'+
    '<p>Attribution: Uluru, <a href="http://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
    'http://en.wikipedia.org/w/index.php?title=Uluru</a> (last visited June 22, 2009).</p>'+
    '</div>'+
    '</div>';

var infowindow = new google.maps.InfoWindow({
    content: contentString
});

var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    title:"Uluru (Ayers Rock)"
});

google.maps.event.addListener(marker, 'click', function() {
  infowindow.open(map,marker);
});

查看示例 (infowindow-simple.html)