Calques de cartes Google

Google Maps - Superpositions

Les superpositions sont des objets liés à des coordonnées de latitude/longitude sur la carte.

Google Maps propose plusieurs types de superpositions :

  • Marqueur (Marker) - Une seule position sur la carte. Le marqueur peut également afficher une image d'icône personnalisée
  • Ligne en forme de zigzag (Polyline) - Une série de lignes sur la carte
  • Polygone (Polygon) - Une série de lignes sur la carte, formant un "fermé"
  • Cercle et rectangle (Circle et Rectangle)
  • Fenêtre d'information (Info Windows) - Affichage du contenu dans une bulle en haut de la carte
  • Superposition personnalisée (Custom overlays)

Google Maps - Ajout de marqueur

Le constructeur de marqueur peut créer un marqueur. Veuillez noter que vous devez définir l'attribut position pour afficher le marqueur.

Utilisez la méthode setMap() pour ajouter le marqueur à la carte :

实例

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

Google Maps - Animation du marqueur

L'exemple suivant montre comment utiliser la propriété animation pour définir l'animation du marqueur :

实例

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

Google Maps - Remplacement du marqueur par une icône

L'exemple suivant détermine l'image (icône) à utiliser pour remplacer le marqueur par défaut :

实例

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

Google Maps - Ligne en forme de zigzag

La ligne en forme de zigzag est dessinée par une série de coordonnées disposées en ordre.

La ligne en forme de zigzag prend en charge les propriétés suivantes :

  • path - Définir plusieurs coordonnées de latitude/longitude pour la ligne
  • 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);