Marker

マーカーのクラス

Constructor

new ZDC.Marker(latlng, optionsopt)

マーカーを作成します。
zIndex(重なり順)のdefault値はauto。

Parameters

名前 説明
latlng
LatLng 		緯度経度
指定した緯度経度がマーカーの下中央の緯度経度になります。
options(optional)
Object
default {}		 オプション設定
名前 説明
styleId(optional)
string
default ZDC.MARKER_COLOR_ID_BLUE_S		 表示するマーカーのスタイルのID
※独自マーカー/HTML描画マーカー使用時は無効
offset(optional)
Point
default null		 マーカーのオフセット値
指定したPointのピクセル分移動します。
x軸は右が正、y軸は下が正となります。
例)Point(100,100)を指定した場合、右方向100,下方向100の位置に移動。
※独自マーカー使用時は無効
contentStyleId(optional)
string
default null		 マーカーに重畳させるコンテンツのスタイルのID
※独自マーカー重畳画像/HTML描画マーカー使用時は無効
contentOffset(optional)
Point
default null		 マーカーに重畳させるコンテンツのオフセット値
指定したPointのピクセル分移動します。
x軸は右が正、y軸は下が正となります。
例)Point(100,100)を指定した場合、右方向100,下方向100の位置に移動。
※独自マーカー重畳画像使用時は無効
opacity(optional)
number
default 1.0		 重畳マーカーの不透明度。0.0～1.0の実数指定、0が透明、1が不透明。
rotatedView(optional)
integer
default 0		 表示回転角度
保持する座標値は変えずに、地図上の見栄えを図形のBBOXを中心に指定角度回転させます。
左回りを正とします。
custom(optional)
Object
default null		 独自マーカー使用時の設定
※HTML描画マーカー使用時は無効
base(optional)
Object

独自マーカー情報

imgSrc
string

独自マーカー画像のURL
※絶対パス/相対パスどちらでも指定可能

imgPos(optional)
Point

独自マーカー画像の左上位置

imgSize(optional)
Point

独自マーカー画像の縦横サイズ
content(optional)
string

マーカーに重畳させる独自コンテンツ画像情報

imgSrc(optional)
string

独自コンテンツ画像のURL
※絶対パス/相対パスどちらでも指定可能

imgPos(optional)
Point

独自コンテンツ画像の左上位置

imgSize(optional)
Point

独自コンテンツ画像の縦横サイズ
htmlMode
boolean
default false 		HTML描画マーカーの作成有無
trueを指定した場合はHTML描画マーカーとして作成され、通常マーカー/独自マーカーの設定は無視されます。
  • true

    HTML描画マーカーを作成する

  • false

    HTML描画マーカーを作成しない
html
Object
default {}		 HTML描画マーカーの設定
base
Object
default {}

HTML描画マーカ―情報

size
Object
default {}

HTML描画マーカーの縦横サイズ（吹き出し部分は含まない）

width
number
default 21

 横幅(px)
・最小値：０より大きい値
・最大値：制限なし

height
number
default 21

 縦幅(px)
・最小値：０より大きい値
・最大値：制限なし

fill
string
default '#0000ff'

 HTML描画マーカーの塗りつぶし色
RGBの16進数表記で記載します。
例） '#ff0000'

stroke
string
default null

 HTML描画マーカーの枠線色
RGBの16進数表記で記載します。
例） '#ff0000'

borderRadius
number
default null

 HTML描画マーカーの角の丸さ
指定値をCSSのborder-radiusとしてpxで指定します。

※未指定時は丸い角となる
※すべての角が同じ値となる
content
Object
default {}

HTML描画マーカーの重畳テキスト情報

text
string
default null

 重畳テキストとして表示する文字列

color
string
default '#ffffff'

 文字色
RGBの16進数表記で記載します。
例） '#ff0000'

fontSize
number
default 17

 フォントサイズ(px)
・最小値：0より大きい値
・最大値：制限なし

font
string
default 'sans-serif'

 使用するフォント（複数指定可）
指定値をCSSのfont-familyに適用します。

例）'"Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif'
propagation(optional)
boolean
default false 		イベントの地図伝搬フラグ
このウィジェット上で起きたイベントをMapにも伝搬させます。
  • true

    Mapのイベントが発生する

  • false

    Mapのイベントが発生しない
draggable(optional)
boolean
default false 		ドラッグでの移動可否
マウス/タッチ操作のドラッグ&ドロップでの移動可否を指定します。
  • true

    ドラッグで移動可

  • false

    ドラッグで移動不可

※長押しでドラッグ可能状態に遷移する
※ドラッグ中はコンテキストメニュー表示等のブラウザ規定動作が無効となる

Example

// インスタンスを作成
var widget = new ZDC.Marker(
  map.getCenter(), // Mapの中心位置(latlng)
  {
    custom: {
    base : {
      imgPos: new ZDC.Point(-13, -38),
      imgSrc: '../img/icon/icon_red.png'
    }
    }
  }
);
// MarkerをMapに追加
map.addWidget(widget);

Methods

getLatLng()

表示位置を取得します。

Returns
Type:LatLng
表示位置を返却します。
setLatLng(latlng)

表示位置を設定します。

Parameters
latlng(LatLng)
表示位置
show()

表示します。

hide()

非表示にすることができます。

setZIndex(zIndex)

重なりの順序を設定します。値が同一のウィジェットとの重なり順は保証されません。

ウィジェットクラス間でのみ有効です。図形との重なり順序は保証されません。
図形クラス:Polygon,Polyline,Oval,GroundOverlay,ImageLayer,GLLabel
ウィジェットクラス:Popup,Marker,UserWidget,MarkerCluster,StataicUserWidget

Parameters
zIndex(number)
重なり順
大きい数字であれば手前、小さい場合は奥に配置されます。
Throws
zIndexが0以下の場合、エラーとなります。
Example
// 奥のレイヤー
lowerGroundOverlay.setZIndex(101);
// 手前のレイヤー
upperGroundOverlay.setZIndex(102);
setOptions(options)

オプションを設定します。

Parameters
options(Object)
オプション設定。constructorのoptionsと同じ。
addEventListener(eventName, listener)

イベントリスナーを登録します。

Parameters
eventName(string)
イベントの種類を表す文字列。
Map Eventsを参照(マウス操作イベントとタッチ操作イベントのみ対応)
listener(function)
登録するイベントリスナー。
イベントリスナーの引数は、HTML DOM要素 addEventListenerメソッドのlistenerに渡されるオブジェクトと同様のオブジェクトが引数として渡されます。
Example
// インスタンスを作成
var widget = new ZDC.Marker(map.getCenter()); // Mapの中心位置(latlng)
// クリックイベント登録
widget.addEventListener('click', function(event) {
  // 処理
  alert("Sample Event!");
});
// MarkerをMapに追加
map.addWidget(widget);
removeEventListener(eventName, listener)

登録したイベントリスナーを削除します。

Parameters
eventName(string)
イベントの種類を表す文字列
Map Eventsを参照
(マウス操作イベントとタッチ操作イベントのみ対応)
listener(function)
削除するイベントリスナー
getId()

idを取得します。

Returns
Type:string
idを返却します。

Marker Style ID

ID アイコン画像
ZDC.MARKER_COLOR_ID_BLUE_S
ZDC.MARKER_COLOR_ID_RED_S
ZDC.MARKER_COLOR_ID_GREEN_S
ZDC.MARKER_COLOR_ID_YELLOW_S
ZDC.MARKER_COLOR_ID_GRAY_S
ZDC.MARKER_COLOR_ID_BLUE_L
ZDC.MARKER_COLOR_ID_RED_L
ZDC.MARKER_COLOR_ID_GREEN_L
ZDC.MARKER_COLOR_ID_YELLOW_L
ZDC.MARKER_COLOR_ID_GRAY_L
ZDC.MARKER_COLOR_ID_INFO_WHITE_S
ZDC.MARKER_COLOR_ID_INFO_BLACK_S
ZDC.MARKER_COLOR_ID_INFO_WHITE_M
ZDC.MARKER_COLOR_ID_INFO_BLACK_M
ZDC.MARKER_COLOR_ID_INFO_WHITE_L
ZDC.MARKER_COLOR_ID_INFO_BLACK_L
ZDC.MARKER_COLOR_ID_INFO_WHITE_LL
ZDC.MARKER_COLOR_ID_INFO_BLACK_LL

Overlap Content Style ID

※画像色の都合で表背景色を塗りつぶしております。

ID アイコン画像
ZDC.MARKER_NUMBER_ID_STAR_L
ZDC.MARKER_NUMBER_ID_1_L
ZDC.MARKER_NUMBER_ID_2_L
ZDC.MARKER_NUMBER_ID_3_L
ZDC.MARKER_NUMBER_ID_4_L
ZDC.MARKER_NUMBER_ID_5_L
ZDC.MARKER_NUMBER_ID_6_L
ZDC.MARKER_NUMBER_ID_7_L
ZDC.MARKER_NUMBER_ID_8_L
ZDC.MARKER_NUMBER_ID_9_L
ZDC.MARKER_NUMBER_ID_10_L
ZDC.MARKER_NUMBER_ID_11_L
ZDC.MARKER_NUMBER_ID_12_L
ZDC.MARKER_NUMBER_ID_13_L
ZDC.MARKER_NUMBER_ID_14_L
ZDC.MARKER_NUMBER_ID_15_L
ZDC.MARKER_NUMBER_ID_16_L
ZDC.MARKER_NUMBER_ID_17_L
ZDC.MARKER_NUMBER_ID_18_L
ZDC.MARKER_NUMBER_ID_19_L
ZDC.MARKER_NUMBER_ID_20_L
ZDC.MARKER_NUMBER_ID_21_L
ZDC.MARKER_NUMBER_ID_22_L
ZDC.MARKER_NUMBER_ID_23_L
ZDC.MARKER_NUMBER_ID_24_L
ZDC.MARKER_NUMBER_ID_25_L
ZDC.MARKER_NUMBER_ID_26_L
ZDC.MARKER_NUMBER_ID_27_L
ZDC.MARKER_NUMBER_ID_28_L
ZDC.MARKER_NUMBER_ID_29_L
ZDC.MARKER_NUMBER_ID_30_L
ZDC.MARKER_NUMBER_ID_STAR_S
ZDC.MARKER_NUMBER_ID_1_S
ZDC.MARKER_NUMBER_ID_2_S
ZDC.MARKER_NUMBER_ID_3_S
ZDC.MARKER_NUMBER_ID_4_S
ZDC.MARKER_NUMBER_ID_5_S
ZDC.MARKER_NUMBER_ID_6_S
ZDC.MARKER_NUMBER_ID_7_S
ZDC.MARKER_NUMBER_ID_8_S
ZDC.MARKER_NUMBER_ID_9_S
ZDC.MARKER_NUMBER_ID_10_S
ZDC.MARKER_NUMBER_ID_11_S
ZDC.MARKER_NUMBER_ID_12_S
ZDC.MARKER_NUMBER_ID_13_S
ZDC.MARKER_NUMBER_ID_14_S
ZDC.MARKER_NUMBER_ID_15_S
ZDC.MARKER_NUMBER_ID_16_S
ZDC.MARKER_NUMBER_ID_17_S
ZDC.MARKER_NUMBER_ID_18_S
ZDC.MARKER_NUMBER_ID_19_S
ZDC.MARKER_NUMBER_ID_20_S
ZDC.MARKER_NUMBER_ID_21_S
ZDC.MARKER_NUMBER_ID_22_S
ZDC.MARKER_NUMBER_ID_23_S
ZDC.MARKER_NUMBER_ID_24_S
ZDC.MARKER_NUMBER_ID_25_S
ZDC.MARKER_NUMBER_ID_26_S
ZDC.MARKER_NUMBER_ID_27_S
ZDC.MARKER_NUMBER_ID_28_S
ZDC.MARKER_NUMBER_ID_29_S
ZDC.MARKER_NUMBER_ID_30_S