上一节:
下一节:

  Google Maps 叠加层

  • 定义和使用

    叠加层是地图上绑定到纬度/经度坐标的对象。
    谷歌地图有几种类型的叠加层：
    • Marker-地图上的单个位置；标记还可以显示自定义图标图像
    • Polyline-地图上的直线系列
    • Polygon-地图上的一系列直线，形状为“封闭”
    • 圆(Circle)和矩形(Rectangle)
    • Info Windows-在地图顶部的弹出气球中显示内容
    • 自定义叠加

  • 添加一个标记

    Marker 构造函数创建一个标记。
    请注意，必须设置 position 属性以使标记显示。
    使用 setMap() 方法将标记添加到地图： 
    var marker = new google.maps.Marker({position: myCenter});
marker.setMap(map);

  • 动画标记

    以下示例显示了如何使用 animation 属性为标记设置动画： 
    var marker = new google.maps.Marker({
  position:myCenter,
  animation:google.maps.Animation.BOUNCE
});

marker.setMap(map);

  • 图标代替标记

    下面的示例指定要使用的图像（图标），而不是默认标记： 
    var marker = new google.maps.Marker({
  position:myCenter,
  icon:'pinkball.png'
});

marker.setMap(map);

  • 谷歌地图-折线

    折线是通过有序序列中的一系列坐标绘制的线。
    折线支持以下属性：
    • path-指定直线的几个纬度/经度坐标
    • strokeColor-指定行的十六进制颜色（格式：“＃FFFFFF”）
    • strokeOpacity-指定线的不透明度（介于0.0和1.0之间的值）
    • strokeWeight-以像素为单位指定线条的粗细
    • editable-定义该行是否可由用户编辑（true/false）
    var myTrip = [stavanger,amsterdam,london];
var flightPath = new google.maps.Polyline({
  path:myTrip,
  strokeColor:"#0000FF",
  strokeOpacity:0.8,
  strokeWeight:2
});

  • 谷歌地图-多边形

    多边形与折线相似，因为它由一系列有序序列的坐标组成；但是，多边形被设计为定义闭环内的区域。
    多边形是由直线组成的，形状是“封闭的”（所有线都连接起来）。
    多边形支持以下属性：
    • path-指定直线的多个LatLng坐标（第一个和最后一个坐标相等）
    • strokeColor-指定行的十六进制颜色（格式：“＃FFFFFF”）
    • strokeOpacity-指定线的不透明度（介于0.0和1.0之间的值）
    • strokeWeight-以像素为单位指定线条的粗细
    • fillColor-以像素为单位指定线条的粗细
    • fillOpacity-指定填充颜色的不透明度（介于0.0和1.0之间的值）
    • editable-定义该行是否可由用户编辑（true/false）
    var myTrip = [stavanger,amsterdam,london,stavanger];
var flightPath = new google.maps.Polygon({
  path:myTrip,
  strokeColor:"#0000FF",
  strokeOpacity:0.8,
  strokeWeight:2,
  fillColor:"#0000FF",
  fillOpacity:0.4
});

  • 谷歌地图-圆

    圆支持以下属性：
    • center-指定圆心的google.maps.LatLng
    • radius-指定圆的半径，以米为单位
    • strokeColor-为圆线指定十六进制颜色（格式：“＃FFFFFF”）
    • strokeOpacity-指定笔触颜色的不透明度（介于0.0和1.0之间的值）
    • strokeWeight-指定线条的笔触粗细（以像素为单位）
    • fillColor-指定圆内区域的十六进制颜色（格式：“＃FFFFFF”）
    • fillOpacity-指定填充颜色的不透明度（介于0.0和1.0之间的值）
    • editable-定义圈子是否可由用户编辑（true/false）
    var myCity = new google.maps.Circle({
  center:amsterdam,
  radius:20000,
  strokeColor:"#0000FF",
  strokeOpacity:0.8,
  strokeWeight:2,
  fillColor:"#0000FF",
  fillOpacity:0.4
});

  • 谷歌地图-InfoWindow

    显示带有一些文本内容的 窗口信息(InfoWindow) 标记： 
    var infowindow = new google.maps.InfoWindow({
  content:"Hello World!"
});

infowindow.open(map,marker);
上一节:
下一节: