글씨를 눌렀을 때 해당위치로 이동하게끔 하고싶습니다

캡처
캡쳐본 처럼 글씨를 클릭했을때 해당위치로 이동하게 만들고 싶은데 어떻게 해야할가요?

매핑 테이블을 이용해서 리스트와 마커를 매핑한 후 클릭한 값의 좌표를 찾아 중심 좌표를 변경하면 됩니다.

제가 이번에 처음 html을 사용해 만들어본건데 간단한 예제 하나만 들어주실수 있나요?

흠… 처음 하신다고 하니 예제를 만들어 드리긴 했지만 참고용으로만 봐주세요.
여러개 마커 표시하기 예제를 변형한 코드로 기본 리스트 형태의 소스입니다.

<!-- key값으로 대체해주세요 -->
<div onclick="move('kakao')">카카오</div>

<script>
    var list = ['kakao', 'park'];
    var markers = {
        'kakao': {
            title: '카카오', 
            latlng: new kakao.maps.LatLng(33.450705, 126.570677)
        },
        'park': {
            title: '근린공원',
            latlng: new kakao.maps.LatLng(33.451393, 126.570738)
        }
    };


    for(var i=0; i<list.length; i++){
         var info = markers[list[i]];;
         var imageSize = new kakao.maps.Size(24, 35); 
         var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize); 
            
          // 마커를 생성합니다
          var marker = new kakao.maps.Marker({
              map: map, // 마커를 표시할 지도
              position: info.latlng, // 마커를 표시할 위치
              title : info.title, // 마커의 타이틀, 마커에 마우스를 올리면 타이틀이 표시됩니다
              image : markerImage // 마커 이미지 
            }); 
    }
            
    // 위치 이동
    function move(key){
        var position = markers[key].latlng;
        map.setCenter(position);
    }
</script>

생각 처럼 잘 안됩니다ㅠㅠㅠㅠㅠ

모든 소스를 다 니즈에 맞게 전달해 드릴 수는 없습니다.
데브톡 검색해보시면 다양한 정보들을 얻으실 수 있을 것 같습니다~

제가 드릴 수 있는 팁은 아래와 같습니다.

  1. 리스트 항목 click 이벤트 등록
  2. 클릭된 항목의 좌표 정보 또는 매핑 테이블로 연결된 marker의 position 가져오기
  3. 가져온 좌표로 map의 중심 좌표 이동

그 외로 소스가 잘 동작하지 않는다면 질문자분이 문제 해결을 해야 할 것 같습니다.

추가로 키워드로 장소검색하고 목록으로 표출하기 예제도 함께 참고하세요.

1개의 좋아요