Django DB와 javascript 연동하여 지도에 마커 표시하기

지도/로컬 API
,
#1

안녕하세요.
django를 통해 간단한 웹서비스 프로젝트를 만들고 있는 초보개발자입니다.

제가 DB에 있는 위도 및 경도 자료를 가져와 이미지 마커를 표시하는 기능을 만들고자 하는데요.
django에서 views.py를 통해 postgresql DB에 있는 값을 불러왔는데 어떻게 javascript 안에 해당 값을 넣는지 모르겠어서 문의드립니다.
그냥 html에서는 {{ }}를 쓰면 되던데, javascript에서는 안되는 것 같더라고요.

코드는 http://apis.map.kakao.com/web/sample/categoryMarker/ 를 따라 입력하였고, 이 링크에서
var coffeePositions = [
new kakao.maps.LatLng(37.499590490909185, 127.0263723554437),
new kakao.maps.LatLng(37.499427948430814, 127.02794423197847),
new kakao.maps.LatLng(37.498553760499505, 127.02882598822454),
new kakao.maps.LatLng(37.497625593121384, 127.02935713582038),
new kakao.maps.LatLng(37.49646391248451, 127.02675574250912),
new kakao.maps.LatLng(37.49629291770947, 127.02587362608637),
new kakao.maps.LatLng(37.49754540521486, 127.02546694890695)
];
를
var coffeePositions = new Array();
{% for d in data %}
coffeePositions[d.id] = new kakao.maps.LagLng({{d.위도}}, {{d.경도}})
{% endfor %}
와 같은 방식으로 바꿔보며 시도해봤습니다.

아직 개발을 해본 경험이 많이 없어서 이렇게 질문드립니다. 도움 주시면 감사하겠습니다 :clap:

#2

음… 받아온 데이터를 coffeePositions 처럼 어떻게 넣어야 하는지를 물어보신건가요?

var coffeePosition = new Array() 
for(var idx=0; idx<list.length; idx++){
    var data = list[idx];
    coffeePosition.push(new kakao.maps.LatLng(data.x, data.y));
}
#3

감사합니다 덕분에 해결했습니다 :slight_smile:
데이터 받아오는 부분 추가하여 아래와 같이 해결했습니다!

	<div id="facility_lat" style="display: none">
		{% for fac in facility %}
			{{ fac.위도 }},
		{% endfor %}
	</div>
	<div id="facility_lng" style="display: none">
		{% for fac in facility %}
			{{ fac.경도 }},
		{% endfor %}
	</div>

<script type="text/javascript">
    var list_lat = document.getElementById("facility_lat").innerText.split(',');
    var list_lng = document.getElementById("facility_lng").innerText.split(',');
    var coffeePositions = new Array();
    for(var idx=0; idx<list_lat.length; idx++){
    	// var data = list[idx];
    	var data_lat = list_lat[idx];
    	var data_lng = list_lng[idx];
    	// coffeePositions.push(new kakao.maps.LatLng(data.위도, data.경도));
    	coffeePositions.push(new kakao.maps.LatLng(data_lat, data_lng));
    }
</script>

혹시 같은 문제를 겪으시는 분들 참고하세요 :smiley:

4개의 좋아요