List<Cafe> list = null; // 변수 만들어서 초기화
dao = template.getMapper(CafeDao.class);
list = dao.selectCafeList();
// System.out.println("카페리스트"+list);
// log.info(list);
return list;
}
@GetMapping
@CrossOrigin
public List<Cafe> cafeList(ModelMap model){
return cafelistSerivce.cafeView();
}
이렇게 하니까 페이지에 지도화면이 안나오고 제이슨으로 나오네요 ㅠㅠ
콘솔 로그에 에러가 출력되어 있다면 에러 로그와 현상을 확일할 수 있는 스크립트 소스를 첨부해주세요.
이렇게 나오네요 ㅠㅠ
<script>
// 마커를 담을 배열입니다
// 마커를 클릭하면 장소명을 표출할 인포윈도우 입니다
var mapContainer = document.getElementById(‘map’), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};
//지도를 생성합니다
var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
//장소 검색 객체를 생성합니다
//var ps = new kakao.maps.services.Places();
// 검색 결과 목록이나 마커를 클릭했을 때 장소명을 표출할 인포윈도우를 생성합니다
var infowindow = new kakao.maps.InfoWindow({zIndex:1});
//키워드로 장소를 검색합니다
//searchPlaces();
//주소-좌표 변환 객체를 생성합니다
var geocoder = new kakao.maps.services.Geocoder();
//지도에 표시될 마크
var markers = [];
// HTML5의 geolocation으로 사용할 수 있는지 확인합니다
if (navigator.geolocation) {
// GeoLocation을 이용해서 접속 위치를 얻어옵니다
navigator.geolocation.getCurrentPosition(function(position) {
var lat = position.coords.latitude, // 위도
lon = position.coords.longitude; // 경도
var locPosition = new kakao.maps.LatLng(lat, lon), // 마커가 표시될 위치를 geolocation으로 얻어온 좌표로 생성합니다
message = '<div style="padding:5px;">내위치!!!!!!</div>'; // 인포윈도우에 표시될 내용입니다
// 마커와 인포윈도우를 표시합니다
displayMarker(locPosition, message);
});
} else { // HTML5의 GeoLocation을 사용할 수 없을때 마커 표시 위치와 인포윈도우 내용을 설정합니다
var locPosition = new kakao.maps.LatLng(33.450701, 126.570667), message = 'geolocation을 사용할수 없어요..'
displayMarker(locPosition, message);
}
// 지도에 마커와 인포윈도우를 표시하는 함수입니다
function displayMarker(locPosition, message) {
// 마커를 생성합니다
var marker = new kakao.maps.Marker({
map : map,
position : locPosition
});
var iwContent = message, // 인포윈도우에 표시할 내용
iwRemoveable = true;
// 인포윈도우를 생성합니다
var infowindow = new kakao.maps.InfoWindow({
zIndex:1,
content : iwContent,
removable : iwRemoveable
});
// 인포윈도우를 마커위에 표시합니다
infowindow.open(map, marker);
//infowindow.setContent(content);
// 지도 중심좌표를 접속위치로 변경합니다
map.setCenter(locPosition);
markers.push(marker); // 배열에 생성된 마커를 추가합니다
console.log(locPosition);
console.log("dddddds"+marker);
}
var positions = []; //마커 좌표를 담을 배열
$.ajax({
type:"GET",
url:"http://localhost:8080/tumbler/tumlist1/map",
data:{
cafe_idx:"${cafe.cafe_idx}",
cafe_name:"${cafe.cafe_name}",
cafe_lat:"${cafe.cafe_lat}",
cafe_lon:"${cafe.cafe_lon}",
location:"${cafe.location}"
},
error : function(error) {
console.log("error");
},
success : function(positions) {
console.log(positions);
//alert(data);
alert(JSON.stringify(positions));
console.log(positions[0].cafe_name, positions[0].cafe_lat);
console.log("success");
for (i = 0; i < positions.length; i++) {
positions.push({
content : positions[i].cafe_name, // 마커의 타이틀, 마커에 마우스를 올리면 타이틀이 표시됩니다
latlng: new kakao.mapsLatLng(positions[i].cafe_lat, positions[i].cafe_lon)
});
marker.setMap(map);
// LatLngBounds 객체에 좌표를 추가합니다
bounds.extend(positions[i]);
}
},
async: false
});
/* $(document).ready(function(){
$.ajax({
url:‘http://localhost:8080/tumbler/tumlist1’,
type:‘GET’,
dataType:“json”,
data:JSON.stringify(data),
data:“cafe_name”+cafe_name,
success:function(data){
console.log(data);
alert(data);
alert(JSON.stringify(data));
},
error : function(e){
console.log("에러발생!! : ", e);
},
async:false
});
});
*/
// 지도를 재설정할 범위정보를 가지고 있을 LatLngBounds 객체를 생성합니다
var bounds = new kakao.maps.LatLngBounds();
var i, marker;
/* for (i = 0; i < positions.length; i++) {
// 배열의 좌표들이 잘 보이게 마커를 지도에 추가합니다
marker = new kakao.maps.Marker({
position: positions[i].latlng, // 마커를 표시할 위치
title : positions[i].title // 마커의 타이틀, 마커에 마우스를 올리면 타이틀이 표시됩니다
});
marker.setMap(map);
// LatLngBounds 객체에 좌표를 추가합니다
bounds.extend(positions[i]);
}
*/
function setBounds() {
// LatLngBounds 객체에 추가된 좌표들을 기준으로 지도의 범위를 재설정합니다
// 이때 지도의 중심좌표와 레벨이 변경될 수 있습니다
map.setBounds(bounds);
}
/*모달창 */
//필요한 엘리먼트들을 선택한다.
const openButton = document.getElementById("open");
const modal = document.querySelector(".modal");
const overlay = modal.querySelector(".md_overlay");
const closeButton = modal.querySelector("button");
//동작함수
const openModal = () => {
modal.classList.remove("hidden");
}
const closeModal = () => {
modal.classList.add("hidden");
}
//클릭 이벤트
openButton.addEventListener("click", openModal);
closeButton.addEventListener("click", closeModal);
</script>아래와 같이 수정해주세요.
new kakao.mapsLatLng (X)
new kakao.maps.LatLng (O)