前回の続き。
今回参照したサイトはこちら……というか今回は、このサイトの記述を
【stimulus使用＋「googlemap→yahoo地図」】
に書き換えただけです。
やったこと、やる予定のこと
0. railsアプリへのstimulus適用（以前書いた記事）
1. stimuluｓでyahoo地図を表示（前回）
２. 表示した地図上で、指定座標に移動（←今ここ）
……今回は「指定座標」はコードに直接書いています。
3. 住所から座標を取得し、それをDBに登録
4. 「3」で登録した情報を選択し、yahoo地図上でその場所に移動（最終回）
ということで、前回作成した地図上を移動できるようにしてみます。
##まずは、移動用のボタンを用意する。
app/views/users/test.html.erb
<div data-controller="moving">
<!-- 中略 -->
<input type="button" id="tokyo" value="東京" data-action="click->moving#tokyo">
<input type="button" id="shinbashi" value="新橋" data-action="click->moving#sinbasi">
<input type="button" id="shinagawa" value="品川" data-action="click->moving#sinagawa">
</div>
ボタンを三個用意して、それぞれにデータアクション名を設定……「data-action="click->moving#tokyo"」（又は「sinbasi」「sinagawa」）
なおこの記述は、【「data-controller="moving"」であるdiv要素内で行う。
このアクション名設定により、ボタンクリックするとstimulusのアクションが発生するので……
##アクション発生時の処理をstimulus用jsファイルに記述
……前回作成したjsファイルに、
app/javascript/controllers/moving_controller.js
initialize() {
this.map = new Y.Map(this.mapTarget.id);
this.map.drawMap(new Y.LatLng(35.66572, 139.73100), 17, Y.LayerSetId.NORMAL);
var center = new Y.CenterMarkControl
var control = new Y.LayerSetControl();
this.map.addControl(center);
this.map.addControl(control);
}
//↓追記
tokyo() {
this.map.panTo(new Y.LatLng(35.680865,139.767036), true);
}
sinbasi() {
this.map.panTo(new Y.LatLng(35.666397,139.758153), true);
}
sinagawa() {
this.map.panTo(new Y.LatLng(35.629867,139.74015), true);
}
//↑追記
「35.680865,139.767036」などの座標は、参照サイトから写してきた実際の位置情報です。
これで実行してみると……（【20190624変更】yahooMapをそのまま貼り付けるのは問題がありそうなため、画像をモザイク付きのものに変更しました）
「東京」「新橋」「品川」のボタンが追加され、クリックするとそれぞれの場所に移動できるようになりました。
とりあえずは今回はここまで、続きはこちらです。