地図にイベントを伝播させる
実行結果
次の例では、ウィジェット上で地図のドラッグができます。
ソースコードと解説
ウィジェットで発生したイベントの伝播を制御するには、propagationプロパティを利用します。
利用可能なウィジェットは、画像図形(GroundOverlay)、画像レイヤー(ImageLayer)、マーカー(Marker)、吹き出し(Popup)、線(Polyline)、多角形(Polygon)、円または楕円(Oval)、ユーザーウィジェット(UserWidget)です。
ソースコード例では、マーカー(Marker)、吹き出し(Popup)、線(Polyline)、多角形(Polygon)、円または楕円(Oval)、ユーザーウィジェット(UserWidget)を利用しています。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- ローダーのURLをscriptでロードする -->
<script src="https://{DOMAIN}/zma_loader.js?key=[APIキー]&auth=[認証方式]"></script>
<script type="text/javascript">
// オブジェクト
var map;
// 中心点の緯度経度（東京駅）
const lat = 35.681406, lng = 139.767132;
// ZMALoader
ZMALoader.setOnLoad(function (mapOptions, error) {
if (error) {
console.error(error)
return
}
// マップオプションをデフォルト値から変更する
mapOptions.center = new ZDC.LatLng(lat, lng); // 中心点の緯度経度を設定
// 地図を生成
map = new ZDC.Map(
document.getElementById('ZMap'),
mapOptions,
function() {
// Success callback
// コントロールを追加する
// 左上 拡大縮小ボタン
map.addControl(new ZDC.ZoomButton('top-left'));
// 右上 コンパス
map.addControl(new ZDC.Compass('top-right'));
// 左下 スケールバー
map.addControl(new ZDC.ScaleBar('bottom-left'));
/* Marker */
var mrk = new ZDC.Marker(new ZDC.LatLng(35.65, 139.85), {propagation:true});
map.addWidget(mrk);
/* Popup */
var popup_ = new ZDC.Popup(map.getCenter(), {htmlSource: 'Sample Popup', propagation: true});
map.addWidget(popup_);
/* Polyline */
var latlngs = [];
latlngs.push(new ZDC.LatLng(35.70, 139.63));
latlngs.push(new ZDC.LatLng(35.70, 139.72));
latlngs.push(new ZDC.LatLng(35.66, 139.65));
latlngs.push(new ZDC.LatLng(35.70, 139.63));
// 線を作成
var pli = new ZDC.Polyline(latlngs, {color: '#FF0000', width: 12,
propagation: true
});
// 線を地図に追加
map.addWidget(pli);
/* Polygon */
// 頂点の配列(外側)を作成
var latlngs1 = [];
latlngs1.push(new ZDC.LatLng(35.6607694489887, 139.7419563985648));
latlngs1.push(new ZDC.LatLng(35.6845229143682, 139.7286721190967));
latlngs1.push(new ZDC.LatLng(35.7057395047171, 139.7473525622848));
latlngs1.push(new ZDC.LatLng(35.7032096194981, 139.7793172849411));
latlngs1.push(new ZDC.LatLng(35.6794617174330, 139.7926015644093));
latlngs1.push(new ZDC.LatLng(35.6582381374606, 139.7739211212211));
latlngs1.push(new ZDC.LatLng(35.6607694489887, 139.7419563985648));
// 頂点の配列(内側)を作成
var latlngs2 = [];
latlngs2.push(new ZDC.LatLng(35.6921309732335, 139.7584403258811));
latlngs2.push(new ZDC.LatLng(35.6789032912005, 139.7484184084603));
latlngs2.push(new ZDC.LatLng(35.6705924719100, 139.7661655538930));
latlngs2.push(new ZDC.LatLng(35.6856869918577, 139.7757698914212));
latlngs2.push(new ZDC.LatLng(35.6921309732335, 139.7584403258811));
// ポリゴンを作成
var plg = new ZDC.Polygon([latlngs1,latlngs2], {
fill: '#FF0000',
strokeWidth: 3,
propagation: true
});
// 追加
map.addWidget(plg);
/* Oval */
var ov = new ZDC.Oval(
new ZDC.LatLng(35.70, 139.85),
{x: 2000, y: 2000},
{
fill: '#00FF00',
stroke: '#000000',
strokeWeight: '2',
propagation: true
}
);
// 円を地図に追加
map.addWidget(ov);
/* UserWidget */
var user_widget = new ZDC.UserWidget(
map.getCenter(),
{ htmlSource: '<div style="background-color: #FF00FF"><b>Sample UserWidget</b><div>',
offset: new ZDC.Point(100, 100),
propagation: true
}
);
// UserWidgetをMapに追加
map.addWidget(user_widget);
},
function() {
// Failure callback
}
);
});
</script>
</head>
<body>
<div id="ZMap" style="position: relative; max-width: calc(510px * 16 / 9); height:510px; border:1px solid #777777;"></div>
</body>
</html>