web-dev-qa-db-ja.com

Google Maps v3ポリラインをダッシュ​​またはドットでスタイリングしますか？

いくつかのカスタムポリラインを含むGoogle Map v3ベースのマップを取得し、それらのラインの一部を点線または破線にします。これを行う方法が見つからないようです。それは可能ですか？そうであれば、どのように？

javascriptapigoogle-mapsstylingpolyline
25
David Pfeffer

この機能はポリラインオプションに追加され、ポリライン上のシンボル Symbols on Polylines と呼ばれます

破線の作成は次のようになります（ demo ）：

var lineCoordinates = [
  new google.maps.LatLng(22.291, 153.027),
  new google.maps.LatLng(18.291, 153.027)
];

var lineSymbol = {
  path: 'M 0,-1 0,1',
  strokeOpacity: 1,
  scale: 4
};

var line = new google.maps.Polyline({
  path: lineCoordinates,
  strokeOpacity: 0,
  icons: [{
    icon: lineSymbol,
    offset: '0',
    repeat: '20px'
  }],
  map: map
});

ダッシュの長さはpathの+/- 1によって制御され、間隔はrepeatによって制御されます。少し冗長ですが、非常に柔軟です。

ダッシュの他に、新機能には円、矢印の定義済みパスが含まれ、ドキュメントにはアニメーションのデモも含まれます:)

64
Tina CG Hoehr