다음지도 api 지도이동막는 기능 채택완료
태커
9년 전
조회 7,002
</p><pre style="margin: 0px; padding: 0px; color: rgb(51, 51, 51); text-transform: none; line-height: 22.4px; text-indent: 0px; letter-spacing: normal; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; word-spacing: 0px; widows: 1; -webkit-text-stroke-width: 0px;"><code class="language-html" style="margin: 0px; padding: 0px; font-style: normal; font-weight: 400;" data-lang="html"><span class="cp" style="color: rgb(153, 153, 153); font-weight: 700;"><!DOCTYPE html></span>
<span class="nt" style="color: navy;"><html></span>
<span class="nt" style="color: navy;"><head></span>
<span class="nt" style="color: navy;"><meta</span> <span class="na" style="color: teal;">charset=</span><span class="s" style="color: rgb(221, 17, 68);">"utf-8"</span><span class="nt" style="color: navy;">></span>
<span class="nt" style="color: navy;"><title></span>지도 이동 막기<span class="nt" style="color: navy;"></title></span>
<span class="nt" style="color: navy;"></head></span>
<span class="nt" style="color: navy;"><body></span>
<span class="nt" style="color: navy;"><div</span> <span class="na" style="color: teal;">id=</span><span class="s" style="color: rgb(221, 17, 68);">"map"</span> <span class="na" style="color: teal;">style=</span><span class="s" style="color: rgb(221, 17, 68);">"width:100%;height:350px;"</span><span class="nt" style="color: navy;">></div></span>
<span class="nt" style="color: navy;"><p></span>
<span class="nt" style="color: navy;"><button</span> <span class="na" style="color: teal;">onclick=</span><span class="s" style="color: rgb(221, 17, 68);">"setDraggable(false)"</span><span class="nt" style="color: navy;">></span>지도 드래그 이동 끄기<span class="nt" style="color: navy;"></button></span>
<span class="nt" style="color: navy;"><button</span> <span class="na" style="color: teal;">onclick=</span><span class="s" style="color: rgb(221, 17, 68);">"setDraggable(true)"</span><span class="nt" style="color: navy;">></span>지도 드래그 이동 켜기<span class="nt" style="color: navy;"></button></span>
<span class="nt" style="color: navy;"></p></span>
<span class="nt" style="color: navy;"><script </span><span class="na" style="color: teal;">type=</span><span class="s" style="color: rgb(221, 17, 68);">"text/javascript"</span> <span class="na" style="color: teal;">src=</span><span class="s" style="color: rgb(221, 17, 68);">"//apis.daum.net/maps/maps3.js?apikey=발급받은 API KEY를 사용하세요"</span><span class="nt" style="color: navy;">></script></span>
<span class="nt" style="color: navy;"><script></span>
<span class="kd" style="font-weight: 700;">var</span> <span class="nx">mapContainer</span> <span class="o" style="font-weight: 700;">=</span> <span class="nb" style="color: rgb(0, 134, 179);">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1" style="color: rgb(221, 17, 68);">'map'</span><span class="p">),</span> <span class="c1" style="color: rgb(153, 153, 136); font-style: italic;">// 지도를 표시할 div </span>
<span class="nx">mapOption</span> <span class="o" style="font-weight: 700;">=</span> <span class="p">{</span>
<span class="nx">center</span><span class="o" style="font-weight: 700;">:</span> <span class="k" style="font-weight: 700;">new</span> <span class="nx">daum</span><span class="p">.</span><span class="nx">maps</span><span class="p">.</span><span class="nx">LatLng</span><span class="p">(</span><span class="mf" style="color: rgb(0, 153, 153);">33.450701</span><span class="p">,</span> <span class="mf" style="color: rgb(0, 153, 153);">126.570667</span><span class="p">),</span> <span class="c1" style="color: rgb(153, 153, 136); font-style: italic;">// 지도의 중심좌표</span>
<span class="c1" style="color: rgb(153, 153, 136); font-style: italic;">// draggable: false, // 지도를 생성할때 지도 이동 및 확대/축소를 막으려면 draggable: false 옵션을 추가하세요</span>
<span class="nx">level</span><span class="o" style="font-weight: 700;">:</span> <span class="mi" style="color: rgb(0, 153, 153);">3</span> <span class="c1" style="color: rgb(153, 153, 136); font-style: italic;">// 지도의 확대 레벨</span>
<span class="p">};</span>
<span class="kd" style="font-weight: 700;">var</span> <span class="nx">map</span> <span class="o" style="font-weight: 700;">=</span> <span class="k" style="font-weight: 700;">new</span> <span class="nx">daum</span><span class="p">.</span><span class="nx">maps</span><span class="p">.</span><span class="nx">Map</span><span class="p">(</span><span class="nx">mapContainer</span><span class="p">,</span> <span class="nx">mapOption</span><span class="p">);</span> <span class="c1" style="color: rgb(153, 153, 136); font-style: italic;">// 지도를 생성합니다</span>
<span class="c1" style="color: rgb(153, 153, 136); font-style: italic;">// 버튼 클릭에 따라 지도 이동 기능을 막거나 풀고 싶은 경우에는 map.setDraggable 함수를 사용합니다</span>
<span class="kd" style="font-weight: 700;">function</span> <span class="nx">setDraggable</span><span class="p">(</span><span class="nx">draggable</span><span class="p">)</span> <span class="p">{</span>
<span class="c1" style="color: rgb(153, 153, 136); font-style: italic;">// 마우스 드래그로 지도 이동 가능여부를 설정합니다</span>
<span class="nx">map</span><span class="p">.</span><span class="nx">setDraggable</span><span class="p">(</span><span class="nx">draggable</span><span class="p">);</span>
<span class="p">}</span>
<span class="nt" style="color: navy;"></script></span>
<span class="nt" style="color: navy;"></body></span>
<span class="nt" style="color: navy;"></html></span></code></pre><p> </p><p>
다음지도api에서 가져온 소스입니다.
버튼을 눌러야 이동이 막히는 소스인데... 기본값으로 이동이 막혀 있는 상태로 열리게 하려면 어디에 어떻게 false를 넣어야 하나요...;;
댓글을 작성하려면 로그인이 필요합니다.
답변 3개
채택된 답변
+20 포인트
9년 전
지도 생성이후에 처리하면 됩니다.
</span></p><p>var map = new daum.maps.Map(mapContainer, mapOption); // 지도를 생성합니다 </p><p>map.setDraggable(false); // 이동 금지 </p><p><span style="font-size: 11pt; line-height: 1.5;">
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인