지역사회 코로나 동선 맵 개발중인 학생입니다. 다름이 아니라 문제가 생겨서 전문가님들의 조언을 받고 싶습니다.
코드는 아래와 같습니다. HTML연습장에서 아래 코드를 치면 성공적으로 빨간점이 표시가 됩니다. 그러나
코로나 동선맵 사이트 (워드프레스) 에 아래 코드를 기입하면 지도만 나올뿐 도형이나 선은 표기가 되지 않습니다. 이럴 경우 어느부분이 잘못된 것인가요? 조언 부탁드립니다!! 개발중인 사이트는 http://coronasignal.kr/?page_id=4401 입니다.
var mapContainer = document.getElementById(‘map’), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng( 37.26478227879066 , 127.03179181663442), // 지도의 중심좌표
level: 6 // 지도의 확대 레벨
};
var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
//
//
//
function suwon() {
// 이동할 위도 경도 위치를 생성합니다
var moveLatLon = new kakao.maps.LatLng(37.26354862670188, 127.02875872395998);
// 지도 중심을 부드럽게 이동시킵니다
// 만약 이동할 거리가 지도 화면보다 크면 부드러운 효과 없이 이동합니다
map.panTo(moveLatLon);
}
function sungnam() {
// 이동할 위도 경도 위치를 생성합니다
var moveLatLon = new kakao.maps.LatLng(37.419849006612075, 127.12671728002815);
// 지도 중심을 부드럽게 이동시킵니다
// 만약 이동할 거리가 지도 화면보다 크면 부드러운 효과 없이 이동합니다
map.panTo(moveLatLon);
}
function hwasung() {
// 이동할 위도 경도 위치를 생성합니다
var moveLatLon = new kakao.maps.LatLng(37.199673917511795 , 126.83130470735247);
// 지도 중심을 부드럽게 이동시킵니다
// 만약 이동할 거리가 지도 화면보다 크면 부드러운 효과 없이 이동합니다
map.panTo(moveLatLon);
}
//
//
//
// 지도에 표시할 원을 생성합니다//
//수원-10//
var circle = new kakao.maps.Circle({
center : new kakao.maps.LatLng(37.27997569932054 , 127.06952756275105), // 원의 중심좌표 입니다
radius: 50, // 미터 단위의 원의 반지름입니다
strokeWeight: 7, // 선의 두께입니다
strokeColor: ‘#ff2f00’, // 선의 색깔입니다
strokeOpacity: 0.7, // 선의 불투명도 입니다 1에서 0 사이의 값이며 0에 가까울수록 투명합니다
strokeStyle: ‘solid’, // 선의 스타일 입니다
fillColor: ‘#ff2f00’, // 채우기 색깔입니다
fillOpacity: 0.5 // 채우기 불투명도 입니다
});
circle.setMap(map);
//수원-9//
var circle = new kakao.maps.Circle({
center : new kakao.maps.LatLng(37.307224501467886 , 126.98481708323952),
radius: 75, // 미터 단위의 원의 반지름입니다
strokeWeight: 7, // 선의 두께입니다
strokeColor: ‘#ff2f00’, // 선의 색깔입니다
strokeOpacity: 0.7, // 선의 불투명도 입니다 1에서 0 사이의 값이며 0에 가까울수록 투명합니다
strokeStyle: ‘solid’, // 선의 스타일 입니다
fillColor: ‘#ff2f00’, // 채우기 색깔입니다
fillOpacity: 0.5 // 채우기 불투명도 입니다
});
circle.setMap(map);
//화성-3//진안동 다람마을 lg태안자이아파트//
var circle = new kakao.maps.Circle({
center : new kakao.maps.LatLng(37.2170257630105 , 127.03564183641781),
radius: 55, // 미터 단위의 원의 반지름입니다
strokeWeight: 7, // 선의 두께입니다
strokeColor: ‘#ff2f00’, // 선의 색깔입니다
strokeOpacity: 0.7, // 선의 불투명도 입니다 1에서 0 사이의 값이며 0에 가까울수록 투명합니다
strokeStyle: ‘solid’, // 선의 스타일 입니다
fillColor: ‘#ff2f00’, // 채우기 색깔입니다
fillOpacity: 0.5 // 채우기 불투명도 입니다
});
circle.setMap(map);
//화성-4//신일해피트리아파트//
var circle = new kakao.maps.Circle({
center : new kakao.maps.LatLng(37.22373285186428 , 126.977819766666),
radius: 65, // 미터 단위의 원의 반지름입니다
strokeWeight: 7, // 선의 두께입니다
strokeColor: ‘#ff2f00’, // 선의 색깔입니다
strokeOpacity: 0.7, // 선의 불투명도 입니다 1에서 0 사이의 값이며 0에 가까울수록 투명합니다
strokeStyle: ‘solid’, // 선의 스타일 입니다
fillColor: ‘#ff2f00’, // 채우기 색깔입니다
fillOpacity: 0.5 // 채우기 불투명도 입니다
});
circle.setMap(map);
//수원-8//
var circle = new kakao.maps.Circle({
center : new kakao.maps.LatLng(37.25299119651715 , 127.01286127993077), // 원의 중심좌표 입니다
radius: 88, // 미터 단위의 원의 반지름입니다
strokeWeight: 7, // 선의 두께입니다
strokeColor: ‘#ff2f00’, // 선의 색깔입니다
strokeOpacity: 0.7, // 선의 불투명도 입니다 1에서 0 사이의 값이며 0에 가까울수록 투명합니다
strokeStyle: ‘solid’, // 선의 스타일 입니다
fillColor: ‘#ff2f00’, // 채우기 색깔입니다
fillOpacity: 0.5 // 채우기 불투명도 입니다
});
// 지도에 원을 표시합니다
circle.setMap(map);
//
//
// 선을 구성하는 좌표 배열입니다. 이 좌표들을 이어서 선을 표시합니다//
//수원-//
var linePath = [
new kakao.maps.LatLng(37.27992170976207 , 127.06940347764645 ),
];
// 지도에 표시할 선을 생성합니다
var polyline = new kakao.maps.Polyline({
path: linePath, // 선을 구성하는 좌표배열 입니다
strokeWeight: 7, // 선의 두께 입니다
strokeColor: ‘#ff2f00’, // 선의 색깔입니다
strokeOpacity: 0.5, // 선의 불투명도 입니다 1에서 0 사이의 값이며 0에 가까울수록 투명합니다
strokeStyle: ‘solid’ // 선의 스타일입니다
});
// 지도에 선을 표시합니다
polyline.setMap(map);