저번의 후속.
이번에 참조한 사이트는 여기....또는 이번에는 이 사이트에 대한 기술이다
[스틸러스 사용 +'구글맵→yahoo 지도']
그냥 고쳐썼어요.

하려던 일

0. 레일스의 결말은

1.stimulus의 결말

２. 표시된 지도에서 지정된 좌표로 이동(← 현재 여기)

...이번'지정 좌표'는 코드에 직접 적혀 있다.

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에서 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.6685139.767036'등 좌표는 참조 사이트에서 촬영한 실제 위치 정보다.
이렇게 시행해보면... ([2019 0624 변경] yahoo Map을 그냥 붙이는 건 문제가 있는 것 같아서 이미지를 모자이크로 변경)

도쿄 신교 고카와 버튼이 추가돼 클릭 후 곳곳으로 이동할 수 있다.
어쨌든 이번에는 여기까지, 계속여기.입니다.