카카오지도api 마커에 대해 질문있어요!


export default {
  name:'income',
  data(){
    return {
      name: [], // 가게 이름
      store_gps_Lat: [],  // 위도
      store_gps_Lng: [],  // 경도
    }
  },
    mounted(){
    axios.get('/get_store_gps') // StoreController@get_store_gps
    .then(res => {

      this.name = res.data[0];  // 모든 가게 이름 배열
      this.store_gps_Lat = res.data[1]; // 모든 가게 위도
      this.store_gps_Lng = res.data[2]; // 모든 가게 경도

    var mapContainer = document.getElementById('map'),

    mapOption = { 
            center: new kakao.maps.LatLng(33.450701, 126.570667), 
            level: 10
      }; 

    var map = new kakao.maps.Map(mapContainer, mapOption);

    var positions = new Array();

    for (let i = 0; i < this.name.length; i++){

      positions[i] = {
        title: this.name[i].store_name,
        latlng: new kakao.maps.LatLng(this.store_gps_Lat[i].store_gps_latitude, this.store_gps_Lng[i].store_gps_longitude)
      }
    }
    console.log(positions);

    var imageSrc = "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png"; 
        
    for (var i = 0; i < positions.length; i ++) {
        
        var imageSize = new kakao.maps.Size(24, 35); 
        
        var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize); 
        
        console.log(positions[i]);
        
        var marker = new kakao.maps.Marker({
            map: map, // 마커를 표시할 지도
            position: positions[i].latlng, // 마커를 표시할 위치
            title : positions[i].title, // 마커의 타이틀, 마커에 마우스를 올리면 타이틀이 표시됩니다
            image : markerImage // 마커 이미지 
        });
    }
    })
    .catch(err => {
      console.log(err);
    })

123123

카카오맵api가이드 참고해서 작성중인데 문제가 좀 생겼어요ㅠ…

콘솔로 확인했을 땐 이렇게 정상적으로 서버에서 위,경도와 이름을 가져오는데 성공했지만, 정작 지도를 확인했을 때 마커가 보이질 않네요…

title에서 오류가 났을거 같진 않고 뭔가 있다면 latlng쪽인것 같은데 배열 확인했을 땐 위,경도가 보이는데 정작 마커가 안보이니까 몹시 답답합니다…

어떻게 값을 참조해야하나요…? 질문드립니다!

해결했어요! 혹시 같은 문제로 고민하실 분들을 위해 해결법 남깁니다!
우선 var marker의 position에서 기존 배열에 위, 경도 순으로 배치했어도 콘솔에선 경, 위도로 찍히기 때문에 배치할 때 경, 위도로 배치하셔야 합니다.
또한 위, 경도값이 숫자값이지만 서버에 저장된 값은 string값이더군요…큰 실수였습니다. parseFloat사용해서 값을 number형으로 바꿔서 삽입하니까 성공적으로 구현되었습니다!

8 Likes

오 고생하셨네요.

:clap: :clap: :clap:

1 Like

감사합니다! 이것저것 비틀면서 해낸만큼 보람이 꽤 있네요ㅎㅎ이 맛에 코딩하는거죠!

스스로 해결하는자에게 많은 하트가 주어지리라