[010/API] Kakao Map API | 위치 표시하기

문제 상황

이제 지도를 띄웠기 때문에 각 핸드폰 대리점들의 위치를 찍어야 한다! db에 있는 대리점들의 정보를 불러와 지도에 찍어보자!

2022.04.09 - [그 땐 IT활동했지/그 땐 영일영 근무했지] - [010/API] Kakao Map API | 시작하기 & 지도 띄우기

[010/API] Kakao Map API | 시작하기 & 지도 띄우기

(↑지도를 띄우는 방법은 이전 포스팅 참조!)

 

공식문서 참고하기!

https://apis.map.kakao.com/web/sample/basicMarker/

db에서 핸드폰 대리점 정보 불러오기

#model.py
from django.db import models

class Store(models.Model):
    name = models.CharField(max_length = 70)
    lat = models.FloatField(default = True)
    lon = models.FloatField(default = True)
    location = models.CharField(max_length=140, null=True, blank=True)

👉🏻핸드폰 대리점들을 저장하는 모델은 다음과 같다. 대리점 이름과 위치(위도와 경도), 주소를 저장한다.(실제보다 아주 간략화한 모델임!)

#views.py
from django.shortcuts import render
from store.models import Store

def map(request):
    stores = Store.objects.all()
    ctx = {'stores': stores}
    return render(request, 'store/map.html', ctx)

👉🏻핸드폰 대리점들을 전부 불러와서 template으로 보내주었다.

 

지도에 대리점 위치 마커 생성하기

<!-- 지도 표시 -->
<div id="map" style="width:100%;height:500px;">
</div>

<!-- 대리점 리스트 표시 -->
<div id="store-in-map">
</div>

👉🏻html은 다음과 같다. 지도를 표시할 div와 대리점 리스트를 표시할 div도 만들어두었다.

//1. 지도 띄우는 코드
var mapContainer = document.getElementById('map'), // 지도를 표시할 div 
mapOption = { 
    center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
    level: 5 // 지도의 확대 레벨
};
// 지도를 표시할 div와  지도 옵션으로  지도를 생성합니다
var map = new kakao.maps.Map(mapContainer, mapOption); 


//2. 위치마다 마커 생성하는 코드
//스토어 목록 json 형식으로 불러오기
var storeList =  {{ stores | safe }}

// 마커 이미지의 이미지 주소입니다
var imageSrc = "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png";
for (var i = 0; i < storeList.length; 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: new kakao.maps.LatLng(storeList[i].lat, storeList[i].lon), // 마커를 표시할 위치
		title : storeList[i].name, // 마커의 타이틀, 마커에 마우스를 올리면 타이틀이 표시됩니다
		image : markerImage, // 마커 이미지
	});
}

👉🏻자바스크립트 코드는 다음과 같다. 1. 지도를 띄우는 코드는 저번 포스팅을 참고!ㅎㅎ 이번에는 2. 위치마다 마커 생성하는 코드에 대해 더 자세히 살펴보겠다.

var storeList =  {{ stores | safe }}

👉🏻먼저 storeList에 view에서 받아온 stores 쿼리셋을 담아준다. 뒤에 | safe를 함께 써주어야 JavaScripts내에서 사용할 수 있다.

var imageSrc = "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png";
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: new kakao.maps.LatLng(storeList[i].lat, storeList[i].lon), 
    title : storeList[i].name, 
    image : markerImage, 
});

👉🏻먼저 마커로 생성할 이미지를 imageSrc에 담아준다. 그리고 imageSize로 크기를 정해준다. 최종적으로 카카오맵 API의 MarkerImage함수에서 둘을 이용해 마커를 생성해서 markerImage에 담아준다!

👉🏻그리고 카카오맵 API의 Marker함수를 이용해 지도에 마커를 찍어준다.

• map: 마커를 표시할 지도를 지정한다.
• positon: LatLng함수를 마커를 표시할 위치를 지정한다. 위도와 경도를 순서대로 넣어준다.
• title: 마커의 타이틀을 적어준다. 마커에 마우스를 올리면 타이틀이 표시된다.
• image: 마커 이미지를 지정한다.

for (var i = 0; i < storeList.length; i ++) {

	...

}

👉🏻storeList 길이만큼 for문을 돌려주면서 마커를 생성해준다!

👉🏻그러면 이렇게 위치마다 마커가 생성된다!

🐰임의로 나오는지만 확인하기 위해 위도, 경도를 무작위로 넣었더니 바다에도 마커가 찍혔다..ㅎㅎ