谷歌地图使用（2）

最新推荐文章于 2023-05-18 13:06:45 发布

天之丛云

最新推荐文章于 2023-05-18 13:06:45 发布

阅读量1.3k

点赞数

分类专栏：谷歌地图文章标签：谷歌地图

本文链接：https://blog.csdn.net/iamwangch/article/details/8443710

版权

谷歌地图专栏收录该内容

2 篇文章 0 订阅

订阅专栏

地图（2）地图叠加层

谷歌地图API部分

叠加层类型：

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()。要删除叠加层，您可以从地图上删除叠加层并将数组的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;
  }
}

查看示例 (overlay-remove.html)

标记(和图层类似)

标记用于标识地图上的位置。默认情况下，标记使用的是标准图标，但您可以在标记的构造函数中设置一个自定义图标，或者通过对标记调用 setIcon() 设置一个自定义图标。google.maps.Marker 构造函数采用的是用于指定标记初始属性的一个 Marker options 对象常量。以下字段特别重要，通常是在您构建标记时进行设置的：

position（必需），用于指定标识标记初始位置的 LatLng。
map（可选），用于指定要在其上设置标记的 Map 对象。

请注意，您应在 Marker 构造函数指定要为哪个地图添加标记。如果您不指定此参数，那么，您只能创建标记，而无法将其附加到地图上（或在地图上显示）。稍后，您可以通过调用标记的 setMap() 方法添加该标记。要删除标记，请调用将 null 作为参数传递的 setMap() 方法。

标记设计为可交互。例如，默认情况下它们接收 'click' 事件，常用于在事件侦听器中打开信息窗口。

以下示例介绍了如何将一个简单的标记添加到澳大利亚中心区域的乌鲁鲁的地图上：

  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, 
      map: map, 
      title:"Hello World!"
  });

此 Marker 标题将会以提示的形式显示。

如果您不想在标记的构造函数中传递任何 Marker options，那么，请在构造函数的最后一个参数中传递一个空对象 {}。

动画

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

DROP 表明标记在首次放置于地图上时，应当从地图顶端落到目标位置。当标记停止时动画也会立即结束，且 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);
  }
}

查看示例 (marker-animations.html)

简单图标

就最基本的情况而言，只需将标记的 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
  });
}

查看示例 (icon-simple.html)

复杂图标

较为复杂的图标可用于指定复杂的形状（表示用户可点击的区域）、添加阴影图像，以及指定这些形状与其他叠加层在显示时应采用的“堆叠顺序”。以这种方式指定的图标应当将自己的 icon 属性和 shadow 属性设置为 MarkerImage 类型的对象。

阴影图像通常应该和主图像成 45 度夹角（向右上方倾斜），并且阴影图像的左下角应与图标图像的左下角对齐。阴影图像应是半透明的 24 位 PNG 图像，这样图像边界便可以在地图上正确显示。

MarkerImage 对象不仅可以定义图像，还可定义图标的 size、图标的 origin（例如，在您所需的图像取自一张较大的拼合图像时）以及图标热点所应定位的 anchor（取决于原点）。

以下示例介绍了如何创建复杂的标记，以表示澳大利亚新南威尔士的悉尼附近的海滩。请注意，应当将 anchor 设置为 (0,32)，从而与旗杆的基座相对应。

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

  setMarkers(map, beaches);
}

/**
 * Data for the markers consisting of a name, a LatLng and a zIndex for
 * the order in which these markers should display on top of each
 * other.
 */
var beaches = [
  ['Bondi Beach', -33.890542, 151.274856, 4],
  ['Coogee Beach', -33.923036, 151.259052, 5],
  ['Cronulla Beach', -34.028249, 151.157507, 3],
  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
  ['Maroubra Beach', -33.950198, 151.259302, 1]
];

function setMarkers(map, locations) {
  // Add markers to the map

  // Marker sizes are expressed as a Size of X,Y
  // where the origin of the image (0,0) is located
  // in the top left of the image.

  // Origins, anchor positions and coordinates of the marker
  // increase in the X direction to the right and in
  // the Y direction down.
  var image = new google.maps.MarkerImage('images/beachflag.png',
      // This marker is 20 pixels wide by 32 pixels tall.
      new google.maps.Size(20, 32),
      // The origin for this image is 0,0.
      new google.maps.Point(0,0),
      // The anchor for this image is the base of the flagpole at 0,32.
      new google.maps.Point(0, 32));
  var shadow = new google.maps.MarkerImage('images/beachflag_shadow.png',
      // The shadow image is larger in the horizontal dimension
      // while the position and offset are the same as for the main image.
      new google.maps.Size(37, 32),
      new google.maps.Point(0,0),
      new google.maps.Point(0, 32));
      // Shapes define the clickable region of the icon.
      // The type defines an HTML <area> element 'poly' which
      // traces out a polygon as a series of X,Y points. The final
      // coordinate closes the poly by connecting to the first
      // coordinate.
  var shape = {
      coord: [1, 1, 1, 20, 18, 20, 18 , 1],
      type: 'poly'
  };
  for (var i = 0; i < locations.length; i++) {
    var beach = locations[i];
    var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        shadow: shadow,
        icon: image,
        shape: shape,
        title: beach[0],
        zIndex: beach[3]
    });
  }
}

查看示例 (icon-complex.html)

折线

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);
}

查看示例 (polyline-simple.html)

折线数组

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

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

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

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


var poly;
var map;

function initialize() {
  var chicago = new google.maps.LatLng(41.879535, -87.624333);
  var myOptions = {
    zoom: 7,
    center: chicago,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

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

  var polyOptions = {
    strokeColor: '#000000',
    strokeOpacity: 1.0,
    strokeWeight: 3
  }
  poly = new google.maps.Polyline(polyOptions);
  poly.setMap(map);

  // Add a listener for the click event
  google.maps.event.addListener(map, 'click', addLatLng);
}

/**
 * Handles click events on a map, and adds a new point to the Polyline.
 * @param {MouseEvent} mouseEvent
 */
function addLatLng(event) {

  var path = poly.getPath();

  // Because path is an MVCArray, we can simply append a new coordinate
  // and it will automatically appear
  path.push(event.latLng);

  // Add a new marker at the new plotted point on the polyline.
  var marker = new google.maps.Marker({
    position: event.latLng,
    title: '#' + path.getLength(),
    map: map
  });
}

查看示例 (polyline-complex.html)

多边形

Polygon 对象类似于 Polyline 对象，都由一系列有序坐标构成。不过，多边形不像折线一样有两个端点，而是定义闭合区域。与折线类似的是，您可以定义影响多边形轮廓的笔触；不同的是，您还可以定义多边形内的填充区域。

此外，Polygon 还可以展示复杂形状，包括不连续形状（多个多边形定义为一个多边形）、“圆环”（多边形区域在多边形内显示为“岛”）以及一个或多个多边形的交叉。因此，单个多边形可指定多条路径。

多边形选项

与折线一样，您可以定义多边形边（“笔触”）的自定义颜色、粗细和不透明度，以及封闭区域（“填充”）的自定义颜色和不透明度。颜色应当采用十六进制数字的 HTML 样式。

由于多边形区域可能包括多条独立的路径，因此 Polygon 对象的 paths 属性指定“数组的数组”（每个都是 MVCArray 类型），其中每个数组分别定义一系列 LatLng 有序坐标。

但是，对于只包含一条路径的简单多边形，为方便起见，您可以采用单个 LatLng 坐标数组构造 Polygon。在将此简单数组存储到 Polygon 的 paths 属性时，Google Maps API 会在构造时将其转换为“数组的数组”。此外，该 API 还提供了简单的 getPath() 方法以构造只包含一条路径的简单多边形。

注意：如果采用此方式构造多边形，则仍需要将路径处理为 MVCArray，以便检索多边形的值。

以下代码段创建一个表示百慕大三角的多边形：


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

  var bermudaTriangle;

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

  var triangleCoords = [
    new google.maps.LatLng(25.774252, -80.190262),
    new google.maps.LatLng(18.466465, -66.118292),
    new google.maps.LatLng(32.321384, -64.75737),
    new google.maps.LatLng(25.774252, -80.190262)
  ];

  // Construct the polygon
  // Note that we don't specify an array or arrays, but instead just
  // a simple array of LatLngs in the paths property
  bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FF0000",
    fillOpacity: 0.35
  });

  bermudaTriangle.setMap(map);
}

查看示例 (polygon-simple.html)

多边形自动完成

上例中的 Polygon 包含四个坐标，但第一个坐标和最后一个坐标为相同位置，从而定义了一个环路。不过，实际上由于多边形定义的就是封闭区域，因而无需定义这最后一个坐标。对于任意指定路径，Google Maps API 将通过绘制连接最后一个坐标与第一个坐标的笔触以自动“封闭”任何多边形。

下例除了省略最后一个坐标之外，其他与上例均相同。

查看示例 (polygon-autoclose.html)

多边形数组

多边形将其一系列坐标指定为数组的数组，其中每个数组都是 MVCArray 类型。每个子数组都是 LatLng 坐标的数组，用于指定单条路径。要检索这些坐标，可调用 Polygon 的getPaths() 方法。由于数组为 MVCArray，因此您需要使用以下操作处理和检查该数组：

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

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

以下代码通过显示多边形的坐标信息，处理多边形的点击事件：


var map;
var infoWindow;

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

  var bermudaTriangle;

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

  var triangleCoords = [
    new google.maps.LatLng(25.774252, -80.190262),
    new google.maps.LatLng(18.466465, -66.118292),
    new google.maps.LatLng(32.321384, -64.75737)
  ];

  bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 3,
    fillColor: "#FF0000",
    fillOpacity: 0.35
  });

  bermudaTriangle.setMap(map);

  // Add a listener for the click event
  google.maps.event.addListener(bermudaTriangle, 'click', showArrays);

  infowindow = new google.maps.InfoWindow();
}

function showArrays(event) {

  // Since this Polygon only has one path, we can call getPath()
  // to return the MVCArray of LatLngs
  var vertices = this.getPath();

  var contentString = "<b>Bermuda Triangle Polygon</b><br />";
  contentString += "Clicked Location: <br />" + event.latLng.lat() + "," + event.latLng.lng() + "<br />";

  // Iterate over the vertices.
  for (var i =0; i < vertices.length; i++) {
    var xy = vertices.getAt(i);
    contentString += "<br />" + "Coordinate: " + i + "<br />" + xy.lat() +"," + xy.lng();
  }

  // Replace our Info Window's content and position
  infowindow.setContent(contentString);
  infowindow.setPosition(event.latLng);

  infowindow.open(map);
}

查看示例 (polygon-arrays.html)

圆形和矩形

除了普通的 Polygon 类之外，JavaScript Maps API 还包括面向 Circle 和 Rectangle 的特定类，用于简化其结构。

圆形

Circle 与 Polygon 类似，您可以自定义圆形（“笔触”）边缘的颜色、粗细和透明度，以及封闭区域（“填充”）的颜色和透明度。颜色应当采用十六进制数字的 HTML 样式。

与 Polygon 不同，您不应为 Circle 定义 paths；圆形有两个用于定义其形状的其他属性：

center 用于指定圆心的 google.maps.LatLng。
radius 用于指定此圆的半径（以米为单位）。

下列代码段创建了用于表示美国人口的圆形：


// Create an object containing LatLng, population.
var citymap = {};
citymap['chicago'] = {
  center: new google.maps.LatLng(41.878113, -87.629798),
  population: 2842518
};
citymap['newyork'] = {
  center: new google.maps.LatLng(40.714352, -74.005973),
  population: 8143197
};
citymap['losangeles'] = {
  center: new google.maps.LatLng(34.052234, -118.243684),
  population: 3844829
}
var cityCircle;

function initialize() {
  var mapOptions = {
    zoom: 4,
    center: new google.maps.LatLng(37.09024, -95.712891),
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };

  var map = new google.maps.Map(document.getElementById("map_canvas"),
      mapOptions);
       
  for (var city in citymap) {
    // Construct the circle for each value in citymap. We scale population by 20.
    var populationOptions = {
      strokeColor: "#FF0000",
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: "#FF0000",
      fillOpacity: 0.35,
      map: map,
      center: citymap[city].center,
      radius: citymap[city].population / 20
    };
    cityCircle = new google.maps.Circle(populationOptions);
  }
}

查看示例 (circle-simple.html)

矩形

Rectangle 与 Polygon 类似，您可以自定义矩形（“笔触”）边缘的颜色、粗细和透明度，以及封闭区域（“填充”）的颜色和透明度。颜色应当采用十六进制数字的 HTML 样式。

与 Polygon 不同，您不应为 Rectangle 定义 paths；矩形有一个用于定义其形状的其他属性：

bounds 用于指定矩形的 google.maps.LatLngBounds。

以下示例会在任何 'zoom_changed' 事件发生时基于前一个视口创建矩形：


function initialize() {

  var coachella = new google.maps.LatLng(33.6803003, -116.173894);
  var rectangle;

  var myOptions = {
    zoom: 11,
    center: coachella,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };

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

  google.maps.event.addListener(map, 'zoom_changed', function() {

    // Get the current bounds, which reflect the bounds before the zoom.
    var rectOptions = {
      strokeColor: "#FF0000",
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: "#FF0000",
      fillOpacity: 0.35,
      map: map,
      bounds: map.getBounds()
    };
    rectangle.setOptions(rectOptions);
  });
}

查看示例 (rectangle-simple.html)

地面叠加层

如果要在地图上放置一幅图片，可以使用 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)

以下显示了将信息窗口 maxWidth 设置为 200 像素的示例：

查看示例 (infowindow-simple-max.html)

天之丛云

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
谷歌地图使用（2）

地图（2）地图叠加层谷歌地图API部分叠加层类型：Google Maps API 包含以下几种叠加层：地图上的单个位置显示为标记。标记有时可显示自定义的图标图片，此时标记通常被称为“图标”。标记和图标是 Marker 类型的对象。（有关详细信息，请参见下面的标记和图标。）地图上的线显示为折线（表示一系列按顺序排列的位置）。线是 Polyline 类型的
复制链接

扫一扫