Google 地图


在Google地图中增加一个符号


Google 地图 - 叠加层

叠加层是地图上绑定到经度/纬度坐标的目标,会随您拖动或缩放地图而移动。

Google 地图 API 有如下几种叠加层:

  • 地图上的点运用符号来显现,一般显现自界说图标。符号是 GMarker 类型的目标,而且能够运用 GIcon 类型的目标来自界说图标。
  • 地图上的线运用折线(表明点的调集)来显现。线是类型为 GPolyline 的目标。
  • 地图上的区域显现为多边形(假如是恣意形状的区域)或底面叠加层(假如是矩形区域)。多边形类似于闭合的折线,因而能够是任何形状。地上叠加层一般用于地图上与图块有直接或直接相关的区域。
  • 地图自身运用图块叠加层显现。假如您有自己的系列图块,能够运用 GTileLayerOverlay 类来改动地图上已有的图块,乃至能够运用 GMapType 来创立您自己的地图类型。
  • 信息窗口也是一种特别的叠加层。可是请注意,信息窗口会主动增加到地图中,而且地图只能增加一个类型为 GInfoWindow 的目标。

Google 地图 - 增加符号

记标识地图上的点。默许情况下,它们运用 G_DEFAULT_ICON(您也能够指定自界说图标)。GMarker 结构函数将 GLatLng 和 GMarkerOptions(可选)目标作为参数。

符号规划为可交互。例如,默许情况下它们接纳 "click" 事情,常用于在事情侦听器中翻开信息窗口。

经过 setMap() 办法在地图上增加符号:

实例

var marker=new google.maps.Marker({
  position:myCenter,
  });

marker.setMap(map);

测验一下 »


Google 地图 - 可拖动的符号

以下实例将介绍怎么运用 animation 特点来拖动符号:

实例

marker=new google.maps.Marker({
  position:myCenter,
  animation:google.maps.Animation.BOUNCE
  });

marker.setMap(map);

测验一下 »


Google 地图 - 图标

符号能够用自界说的新图标来显现,以代替默许图标:

实例

var marker=new google.maps.Marker({
  position:myCenter,
  icon:'pinkball.png'
  });

marker.setMap(map);

测验一下 »


Google 地图 - 折线

GPolyline 目标可在地图上创立线性叠加层。GPolyline 包含一系列点,并创立一系列有序衔接这些点的线段。

折线支撑以下特点:

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

测验一下 »


Google 地图 - 多边形

GPolygon 目标类似于 GPolyline 目标,由于它们都包含一系列有序的点。可是,多边形不像折线相同有两个端点,而是规划为界说构成闭环的区域。

和折线相同,您能够自界说多边形边(线)的色彩、粗细和透明度,以及关闭的填充区域的色彩和透明度。色彩应是十六进制数字 HTML 款式。

多边形支撑以下特点:

  • path - 指定多个直线纬度的坐标 (第一个和最终一个坐标是持平的)
  • strokeColor - 指定直线的十六进制色彩值(格局: "#FFFFFF")
  • strokeOpacity -指定直线的透明度(该值为 0.0 到 1.0)
  • strokeWeight - 界说线的宽度,以像素为单位。
  • fillColor - 指定闭合区域的十六进制色彩值 (格局: "#FFFFFF")
  • 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
});

测验一下 »


Google 地图 - 圆

圆支撑以下特点:

  • center - 指定圆的中心点参数 google.maps.LatLng
  • radius - 指定圆的半径,以米为单位
  • strokeColor - 指定弧线的十六进制色彩值(格局: "#FFFFFF")
  • strokeOpacity - 指定弧线的透明度(该值为 0.0 到 1.0)
  • strokeWeight -界说线的宽度,以像素为单位。
  • fillColor - 指定圆的十六进制色彩值填充值 (格局: "#FFFFFF")
  • fillOpacity - 指定填充色彩的透明度 (该值为 0.0 到 1.0)
  • 界说用户是否可修改直线(true/false)

实例

var myCity = new google.maps.Circle({
  center:amsterdam,
  radius:20000,
  strokeColor:"#0000FF",
  strokeOpacity:0.8,
  strokeWeight:2,
  fillColor:"#0000FF",
  fillOpacity:0.4
});

测验一下 »


Google 地图 - 信息窗口

在一个符号上显现一个文本信息窗口:

实例

var infowindow = new google.maps.InfoWindow({
  content:"Hello World!"
  });

infowindow.open(map,marker);

测验一下 »


Google 地图 - 叠加层参考手册

Google Maps API 参考手册.