Google Map Overlay

Google Maps - Tsari

Tsari ne wanda ya tsara da yakin/koordinato na yakin da yake a cikin map.

Google Maps ana da ƙasashen tsari da yawa:

  • Marker - Wani cibiyar da yake a cikin map. Marker zai iya nuna zane na ikoni da yake da tsari
  • Polyline - Dake da yakin da yake a cikin map
  • Polygon - Dake da yakin da yake a cikin map, wanda yake da tsari ne
  • Circle da Rectangle
  • Fataccen fataccen (Info Windows) - Ana cikin fataccen fataccen na map
  • Kamfaniyar Tsari (Custom overlays)

Google Maps - Tsara ikoni

Marker kwarewai yana tsara ikoni. Ka yarjejeniya, ana dace da wajibin gina matsakaici na position domin zabi ikoni.

Dauka setMap() sabonin don tsara ikoni a cikin map:

شاگوفا

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

Google Maps - Ikoni da yake da animation

Dake da misalin wanda ya bayyana samar da animation don tsara ikoni:

شاگوفا

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

Google Maps - Ikoni don ikoni

Dake da misalin wanda ya bayyana samar da zane (ikoni) domin kama ikoni da yake da tsari.

شاگوفا

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

Google Maps - Polyline

Polyline wani ne wanda a yi kowane kowane yakin yi tsara zuwa tsohuwa.

Dake da Polyline suka da yaki dake da hanci

  • path - Dake da yaki/koordinato da yaki
  • 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 - 规定线的几个纬度/经度坐标（第一个和最后一个坐标相等）
  • 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
});

谷歌地图 - 圆

圆支持以下属性：

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

谷歌地图 - 信息窗口

为 marker 显示带有文本内容的信息窗口：

شاگوفا

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