地図上にピンを表示（v1）
地図上にピンを表示します。
HTML(サンプルコード)
<div id="map"></div>
<div id="btn-area">
<button id="add-pin">地図中心にピンを表示</button> / <button id="remove-pin">全てのピンを削除</button>
</div>
<style>
#map {
height: 400px;
width: 700px;
margin: 0 auto;
}
#btn-area {
text-align: center;
}
</style>
JavaScript(サンプルコード)
// 地図を中心地の緯度経度を用意します
const center = new navitime.geo.LatLng('35.667395', '139.714896');
// 地図を用意します
const map = new navitime.geo.Map('map', center, 16, {
bounds: new navitime.geo.BoundsInfo(0, $('#map').width(), 0, $('#map').height())
});
// マーカーを用意します
const pinList = [];
const pin = new navitime.geo.overlay.Pin({
map: map, // 表示させる対象の地図
icon: '../../../img/pin.png', // ピン画像
position: center, // ピンを表示させる緯度経度（ここでは地図の中心）
});
// マーカーを表示します
pinList.push(pin);
// 「Add-Pin」ボタンが押されると、その際の地図中心位置にピンが表示されます
document.querySelector('#add-pin').addEventListener('click', () => {
pinList.push(new navitime.geo.overlay.Pin({
map: map,
icon: '../../../img/pin.png',
position: map.getCenter(),
}));
});
// 「Remove-Pin」ボタンが押されると、地図上のすべてのピンが削除されます
document.querySelector('#remove-pin').addEventListener('click', () => {
pinList.forEach(pin => pin.setMap(null));
pinList.length = 0
});