setAnimation에 인자를 주지 않으면 애니메이션이 사라진다.

DROP은 1회에 한해서 한번 뚕~ 하고 끝

BOUNCE는 계속 뛰고 있으니 얘가 무난할 듯?


naver.maps.Event.addListener(urlMarker, 'click', function() {

    if (urlMarker.getAnimation() !== null) {

        urlMarker.setAnimation(null);

    } else {

        urlMarker.setAnimation(naver.maps.Animation.BOUNCE);

    }

}); 

[링크 : https://navermaps.github.io/maps.js/docs/tutorial-marker-animation.example.html]

Posted by 구차니

네이버 지동데서 선의 굵기를 임의로 바꿀수 있는 법 찾는중


개발자 도구에서 아래로 입력하면 바뀌는 것 확인

polyline.setStyles("strokeWeight","10")

[링크 : https://navermaps.github.io/maps.js/docs/tutorial-3-polygon-simple.example.html]

Posted by 구차니

열지도 처럼 가중치 줘서 출력 가능하고

출력하는 색상을 바꿀수 있는 듯.

(안개 출력하기 좋으려나?)


[링크 : https://navermaps.github.io/maps.js/docs/data/earthquake_weight.json

[링크 : https://navermaps.github.io/maps.js/docs/tutorial-Visualization.html]

[링크 : https://navermaps.github.io/maps.js/docs/tutorial-5-visualization-dotmap-w.example.html]

Posted by 구차니

예제 자체는 클릭시 특정 위치로 이동하는 것이지만

별다르게 float div를 안쓰고 안에다 버튼을 만드는 용도로도 쓸 수 있을 듯


[링크 : https://navermaps.github.io/maps.js/docs/tutorial-4-control-custom-p1.example.html]

Posted by 구차니

의외로(?) 마커의 mouse over 스타일 지정하는걸 발견..

그나저나 예제 코드 드럽게 기네..


[링크 : https://navermaps.github.io/maps.js/docs/tutorial-marker-intersect.example.html]

Posted by 구차니

결론 : 디자이너를 주깁시다 -_-


css 에서는 아래와 같이 filter를 하나 선언해주고

.grayscale {

filter: grayscale( 100% );


jquery를 이용해서 ontile?.map.naver.net 으로 나오는 녀석들이 지도 이미지니까

아래와 같이 해주면 1회에 한해서 흑백으로 나오게 된다.

$('img[draggable][src*="map.naver.net"]').addClass("grayscale") 


[링크 : https://stackoverflow.com/questions/4498177/find-image-src-that-contains]

[링크 : https://stackoverflow.com/questions/835378/jquery-how-to-find-an-image-by-its-src/835472]

[링크 : http://api.jquery.com/attribute-contains-selector/]

Posted by 구차니

당연한거 같긴한데...


단위가 m 란다..

(다른건 위도 경도라서 단위가 멀까 했는데..)


 radius number <optional> 0 도형의 반경입니다. 단위는 미터입니다.

[링크 : https://navermaps.github.io/maps.js/docs/naver.maps.Circle.html]


+

fillOpacity number <optional> 1 도형 영역을 채울 색상의 불투명도입니다. 값의 범위는 0~1입니다. 


투명도 지정하면 원하는걸 적당히 그릴수 있을 듯?

Posted by 구차니

겁 먹었었는데.. 가입이 되어 있었나?

그냥 네이버 아이디로 로그인 하니 문제없이 로그인 된다..


[링크 : https://www.ncloud.com/]

[링크 : https://www.ncloud.com/product/applicationService/maps]


독특하게(?) AI.Naver API 라고

AI Service와 Application Service가 합쳐져 있다.

Application Service에 Maps가 포함되고

AI Service에 Clova와 Papago가 포함된다.



[링크 : https://console.ncloud.com/mc/solution/naverService/application]



하단에 Applicaton 등록 누르고 동의 한다음

Application 이름 등록하고 쓸 서비스, 그리고 사용할 서비스 도메인을 등록한다.


그러면 아래와 같이 사용량 통계 나오고


인증정보를 누르면 아래와 같이 클라이언트 ID가 나온다.


가입하고 보니 친절한 설명이 나오네 ㅋㅋㅋ

[링크 : http://docs.ncloud.com/ko/naveropenapi_v3/application.html]

[링크 : https://navermaps.github.io/maps.js.ncp/]


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <title>간단한 지도 표시하기</title>
    <script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=YOUR_CLIENT_ID"></script>
</head>
<body>
<div id="map" style="width:100%;height:400px;"></div>

<script>
var mapOptions = {
    center: new naver.maps.LatLng(37.3595704, 127.105399),
    zoom: 10
};

var map = new naver.maps.Map('map', mapOptions);
</script>
</body> 

</html> 


[링크 : https://navermaps.github.io/maps.js.ncp/tutorial-2-Getting-Started.html]



+

버전은 둘다 v3이고 clientId 식별자가 다른 키로 바뀌었다.


구버전

<script src="https://openapi.map.naver.com/openapi/v3/maps.js?clientId=USER_CLIENT_KEY"></script>


신버전

<script src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=USER_CLIENT_KEY"></script>

Posted by 구차니

marker든 polyline 이든 setMap(null)을 해주면 사라진다.

한번에 편하게(?) 하는 법은 없고, 추가할때 배열로 관리해야 한다는 건 변하지 않네..


setMap(map)

오버레이를 지도에 추가합니다. 인수로 null을 전달하면 오버레이를 지도에서 제거합니다. 

[링크 : https://navermaps.github.io/maps.js/docs/naver.maps.Polyline.html]

[링크 : https://github.com/navermaps/maps.js/issues/31]

Posted by 구차니

+

2018.12.12

유입경로가 많아서 수정

latitude가 위도, longitude가 경도


위도 33도~38도 (북한 포함하면 43도 정도, 38선은 가로로 그인 선이니까 위도로 외우면 쉬움)

경도 126~131도

값을 지님


new naver.maps.LatLng(lat,lng) 함수는 위도 먼저, 경도 먼저인데

new naver.maps.LatLng(lat, lng)

Parameters
NameTypeDefaultDescription
latnumber0

위도

lngnumber0

경도

 


DB쪽의 실수인지 간혹 반대로 들어있는 경우도 존재한다.

귀찮으면(?)

function latlng_corrector(lat, lng) {

  if (33.0 <= lat && lat <= 43.0 && (124.0 <= lng && lng <= 132.0))

    return { lat: lat, lng: lng };

  else if (124.0 <= lat && lat <= 132.0 && (33.0 <= lng && lng <= 43.0)) {

    console.log("latitude/longitude swapped!!");

    return { lat: lng, lng: lat };

  } else return { lat: lat, lng: lng };

이런거 하나 넣고 대충 위도 경도 정보가 뒤바뀌었을 경우 자동으로 뒤집어 주는 것도 방법 일 듯?


+

2018.12.13

아래 예제에서 클릭해서 마커 지정하고

개발자 도구에서 marker.getPosition() 해주면 위치 값이 똭~ 나온다.

이 키워드로 검색하는 분들 목적은.. 위도경도 정보 뽑아 내는거라면 그게 더 나을지도?


[링크 : https://navermaps.github.io/maps.js/docs/tutorial-9-marker-position.example.html]


---

아무생각 없이(!) path에 좌표를 아래와 같이 LatLang([pos1, pos2]) 식으로 했더니

배열이 정렬되어 버리는지 작은 수랑 큰수랑 순서가 엉뚱하게 작동을 한다.

new naver.maps.Polyline({
path: [
new naver.maps.LatLng([
marker_db[data[idx].cid].lng,
marker_db[data[idx].cid].lat
]),
new naver.maps.LatLng([
marker_db[data[idx + 1].cid].lng,
marker_db[data[idx + 1].cid].lat
])
],
map: map,
endIcon: naver.maps.PointingIcon.OPEN_ARROW,
strokeColor: "#cc0000",
strokeWeight: 6
});


반드시(?) []를 빼고 아래와 같이 써야 하는건가...

근데 배열이랑 숫자랑 먼가 다른건가.. 삽입(?)하는 순서에 영향을 받네?

new naver.maps.Polyline({
path: [
new naver.maps.LatLng(
marker_db[data[idx].cid].lat,
marker_db[data[idx].cid].lng
),
new naver.maps.LatLng(
marker_db[data[idx + 1].cid].lat,
marker_db[data[idx + 1].cid].lng
)
],
map: map,
endIcon: naver.maps.PointingIcon.OPEN_ARROW,
strokeColor: "#cc0000",
strokeWeight: 6
});

[링크 : https://navermaps.github.io/maps.js/docs/naver.maps.LatLng.html


+

걍 고민을 해보니.. 변수 하나에 null값이 들어 갔을 뿐

lat lng의 순서 문제라던가 array의 문제라고 보긴 힘들지도...?

Posted by 구차니