해야할 일 :
네이버 지도 api버전을 v2에서 v3로 변경
- 일반지도 / 위성지도 가 보여야 함
- 폴리라인사용
- 마커사용 (각 위치별 개별 마커 이미지 있음)
- 마커 클릭시 설명창이 보여야 함
- 지도 위치 검색 후 센터잡기
* 함수안에서 실행을 할 때는 callback을 추가해야 한다.
https://navermaps.github.io/maps.js/docs/tutorial-0-Getting-Started.html
https://navermaps.github.io/maps.js/docs/tutorial-4-Submodules.html
* 나는.. naver.maps. .. 네임스페이스? 이 부분이 함수 안에서 사용할 때 정의되지 않았다고 계속 그래서
혹시나 하고 N으로 변경했는데 인식이 됐다.
- 다시보니.. 이렇게 쓰라고 만든거였네..
https://navermaps.github.io/maps.js/docs/tutorial-2-Abbreviation.html
1.지도가 보일 jsp
<script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?clientId=받은clientId&callback=init"></script>
<div class="course_map_include" id="map" style="width:100%;height:600px;">
<div class="buttons" style="position: absolute; top: 0px; left: 0px; z-index: 1000; padding: 5px;">
<input class="control-btn" id="NORMAL" type="button" value="일반지도" style="margin: 0; color: #555; padding: 2px 6px; background: #fff; border: solid 1px #333; cursor: pointer; -webkit-border-radius: 5px; outline: 0 none; border-radius: 5px; box-shadow: 2px 2px 1px 1px rgba(0,0,0,0.5) !important;">
<input class="control-btn" id="TERRAIN" type="button" value="지형도">
<input class="control-btn" id="SATELLITE" type="button" value="위성지도">
<input class="control-btn " id="HYBRID" type="button" value="겹쳐보기">
</div>
</div>
//지도 위에 버튼을 눌러야 하고 스크립트 추가가 필요하다. 그리고 나는..스타일도 긁어옴..
<script type="text/javascript">
var btns = $(".buttons > input");
btns.on("click", function(e) {
e.preventDefault();
var mapTypeId = this.id;
if (map.getMapTypeId() !== N.MapTypeId[mapTypeId]) {
map.setMapTypeId(N.MapTypeId[mapTypeId]); // 지도 유형 변경하기
btns.removeClass("control-on");
$(this).addClass("control-on");
}
});
</script>
2. nav.js
function init() {
map = new N.Map('map', {
zoom: 9,
maxZoom : 14,
minZoom : 0
});
}
...
//폴리라인
var polyline1 = eval("["+content+"]");
var point = new Array();
for (var i=0;i<polyline1.length;i++){
point[i] = new N.LatLng(polyline1[i][1], polyline1[i][0]);
}
var polyline = new N.Polyline({
path: point, //point 배열로 만들어서 넣음
strokeWeight: 5,
strokeColor: cpl_color, // 상황에 따라서 DB에서 색을 가져와서 넣더라.(DB에 95,0,255,255 이런 식으로 저장해두고)
strokeOpacity: 1
});
polyline.setMap(map); // 추가
//지도를 검색결과에 따라 이동시키기
...
point = new N.LatLng(pointY,pointX);
map.setCenter(point);
map.setZoom(9);
//마커추가하기
-- 반복문돌면서 위경도 찍음 시작--
var markerOptions = {
position: point,
icon: {
url: "/images/"+icon, //각 위치에 대해 필요한 이미지를 보여준다. icon은 DB에 저장되어 있거나 파일명만 있거나..
size: new N.Size(30, 30),
anchor: new N.Point(20, 20)
}
};
var marker = new N.Marker(markerOptions);
marker.setMap(map); // 추가
-- 반복문돌면서 위경도 찍음 끝--
//설명창추가
var infoWindow = new N.InfoWindow({
content: "<table style='background-color:white;'><tr><td>"+name+"</td></tr><tr><td><img src=주소/></td></tr></table>" //이렇게 만들어서 쓸 수 있음
});
N.Event.addListener(marker, "click", function(e) {
if (infoWindow.getMap()) {
infoWindow.close();
else {
infoWindow.open(map, marker);
}
});
...
'차근차근 > 이것저것' 카테고리의 다른 글
홈페이지 점검 후 수정하기 1 (0) | 2017.05.19 |
---|---|
PMD..적용하기 (0) | 2017.03.17 |
아파치톰캣 오라클 연동 (0) | 2017.03.14 |
centOS sendmail에서 gmail로 발송이 안됨. 11 - gmail을 통해서 전송 (2) | 2017.01.19 |
centOS sendmail에서 gmail로 발송이 안됨. 10 - 포기 (0) | 2017.01.17 |