이 기사의 지도는 Tu Map을 사용합니다.
Tuba Map 온라인 API 주소
http://union.mapbar.com/apidoc/
오프라인 CHM 형식 다운로드 주소:
http://union.mapbar.com/apidoc/chm/mapbarapi.rar
렌더링:
Mapbar Map API를 사용하면 JavaScript를 사용하여 Mapbar 지도를 자신의 웹페이지에 삽입할 수 있습니다. API는 지도와 상호작용하는 다양한 방법(http://www.mapbar.com/localsearch/index.html 페이지 참조)과 콘텐츠를 추가하기 위한 일련의 서비스를 제공합니다. 자신의 웹사이트에서 안정적인 지도 애플리케이션을 만들 수 있습니다.
공개 테스트 키:
http: // Union.mapbar.com/apis/maps/free?f=mapi&v=31.2&k=aCW9cItqL7sqT7AxaB0zdHZoZSWmbBsuT7JhMHTsMeD6ZIl9NzFsZHT=@JBL979@Iu7lJJZWWq0IDu9xZMzMxq7I9AhH7LAAA6hqzZH ZZLTbZ ZauxlDz7C7DD9ZCFGT=
Mapbar 지도를 사용해 보려면 다음 단계를 건너뛰세요. 키를 신청하면 공개 테스트 키를 사용하여 로컬(http://localhost)에서 테스트를 수행할 수 있습니다.
Internet Explorer 버전 8.0에는 호환성 문제가 있습니다. 사이에
태그를 추가해야 합니다. ; 지도를 확인하기 위한 웹페이지의 태그 폴리라인 기능이 올바르게 수행됩니다.
프론트엔드 소스코드만 있습니다
프로젝트에서 위치지속성을 구현하려면 ajax가 필요합니다
코드는 다음과 같습니다
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict .dtd">
맵 테스트</title> ; <BR><스크립트 유형 = "text/javascript" src = "http://union.mapbar.com/apis/maps/free?f=mapi&v=31.2&k=aCW9cItqL7..."></ script> ; <BR><script type="text/javascript"> <br>var Maplet=null;//지도 개체<br>var marker=null;//마커 개체<br>var le=null;/ / 확대/축소 수준<br>var myEventListener=null;//지도 클릭 이벤트 핸들<br>function initMap()//초기화 함수<br>{ //http://Qbit.cnblogs.com을 다시 게시하려면 출처를 표시해 주세요 <br>le=10; //기본 확대/축소 수준<br>maplet = new Maplet("mapbar"); <br>//여기서 데이터베이스에서 읽은 다음 작은 스크립트를 사용하여 지도 좌표를 초기화할 수 있습니다. 페이지<br>//예: Maplet.centerAndZoom(new MPoint(<%=dimension%>, <%=longitude%>),<%=zoom level%>) <br>maplet .centerAndZoom( new MPoint(116.38672, 39.90805), le);//지도 중심점 좌표 초기화 및 확대/축소 수준 설정<br>maplet.addControl(new MStandardControl()) <br>} <br>function setp( ) <br> { <br>if (마커)//마크 추가 여부 확인<br>{ <br>alert("마크가 추가되었습니다.") <br>return; >maplet.setMode(" Bookmark");//마크 모드 추가 설정<br>maplet.setCursorIcon("tb1.gif"); //마우스 팔로우 라벨 추가<br>myEventListener = MEvent.bind(maplet, "click ", this, addp ; >marker = new MMarker( point, //좌표<br>new MIcon("mark.gif", 24, 24), //Tag ICO(그림, 크기) <br>new MInfoWindow(" Cai Ruifuzhuangheshi", "역사상 최고"), //마크 개체 <br>new MLabel("Cai Ruifu") //소형 레이블 <br>); <br>marker.bEditable=true; <br>marker. dragAnimation=true; <br>maplet.addOverlay(marker);//마크 추가<br>marker.setEditable(true); //마크 편집 상태 설정<br>maplet.setMode("pan"); 드래그할 지도(일반)<br>le= Maplet.getZoomLevel(); //현재 확대/축소 수준 가져오기<br>document.getElementById("findp").style.display="block" <br>document .getElementById("delp" ).style.display="block"; <br>document.getElementById("savep").style.display="block" <br>MEvent.removeListener(myEventListener);//이벤트 로그아웃 <br>} <br>} <br>//마크 찾기<br>function find(){ <br>maplet.centerAndZoom(marker.pt, le);//마크 찾기<br>} <br>// 모든 마커 제거<br>function del(){ <br>//설정된 좌표 제거<br>maplet.clearOverlays(true); <br>location.reload(); //다시 사용할 때 약간의 버그가 있습니다. - 여기에 추가합니다. 페이지를 새로 고쳐서 <br>/*document.getElementById("findp").style.display="none" <br>document.getElementById("delp").style.display ="none"; <br> document.getElementById("savep").style.display="none"; <br>maplet=null; <br>marker=null; <br>initMap ();*/ <br> } <br>//마크 데이터 추출<br>function savep() <br>{ <br>alert("현재 좌표점
경도:" marker.pt.lon "n차원:" marker.pt.lat "n확대/축소 수준:" le); <br>} <br></script> <br></head> <br> < body onload="initMap()"> <br><table width="501"> <br><tr><td><input type="button" value="라벨 추가" onclick= "setp()"/></td> <br><td><input type="button" id="findp" value="표시 보기" style="display:none;" find()"/></td> <br><td><input type="button" id="delp" value="표시 삭제" style="display:none;" onclick= "del ()"/></td> <br><td><input type="button" id="savep" value="save" style="display:none;" onclick="savep () "/></td> <br></tr> <br><tr><td colspan="4"><div id="mapbar" style="너비:500px ;높이 :300px"></div> <br></td></tr> <br></table> <br></body> <br></html> <br> <br> <br>소스코드 다운로드 주소 : <br>http://xiazai.jb51.net/201004/yuanma/mapbar.rar<br><br>
</div></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>성명：</span><div>본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.</div></div></div><div class="nphpSytBox"><span>이전 기사：<a class="dBlack" title="jquery 연구 노트 1_jquery" href="https://m.php.cn/ko/faq/22192.html">jquery 연구 노트 1_jquery</a></span><span>다음 기사：<a class="dBlack" title="jquery 연구 노트 1_jquery" href="https://m.php.cn/ko/faq/22194.html">jquery 연구 노트 1_jquery</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>관련 기사</h2><em><a href="https://m.php.cn/ko/article.html" class="bBlack"><i>더보기</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle"
style="display:block"
data-ad-format="fluid"
data-ad-layout-key="-6t+ed+2i-1n-4w"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({});
</script><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/ko/faq/1609.html" title="Bootstrap 목록 그룹 구성 요소에 대한 심층 분석" class="aBlack">Bootstrap 목록 그룹 구성 요소에 대한 심층 분석</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ko/faq/1640.html" title="JavaScript 함수 커링에 대한 자세한 설명" class="aBlack">JavaScript 함수 커링에 대한 자세한 설명</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ko/faq/1949.html" title="JS 비밀번호 생성 및 강도 감지의 전체 예(데모 소스 코드 다운로드 포함)" class="aBlack">JS 비밀번호 생성 및 강도 감지의 전체 예(데모 소스 코드 다운로드 포함)</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ko/faq/2248.html" title="Angularjs는 WeChat UI(weui)를 통합합니다." class="aBlack">Angularjs는 WeChat UI(weui)를 통합합니다.</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ko/faq/2351.html" title="JavaScript를 사용하여 중국어 번체와 중국어 간체 간을 빠르게 전환하는 방법과 중국어 간체와 중국어 번체 간 전환을 지원하는 웹사이트의 요령_javascript 기술" class="aBlack">JavaScript를 사용하여 중국어 번체와 중국어 간체 간을 빠르게 전환하는 방법과 중국어 간체와 중국어 번체 간 전환을 지원하는 웹사이트의 요령_javascript 기술</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle"
style="display:block"
data-ad-format="autorelaxed"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({});
</script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！</p></div><div class="footermid"><a href="https://m.php.cn/ko/about/us.html">회사 소개</a><a href="https://m.php.cn/ko/about/disclaimer.html">부인 성명</a><a href="https://m.php.cn/ko/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved
</p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) {
var _times = times || -1, //100次
_interval = interval || 20, //20毫秒每次
_self = this,
_selector = this.selector, //选择器
_iIntervalID; //定时器id
if( this.length ){ //如果已经获取到了，就直接执行函数
func && func.call(this);
} else {
_iIntervalID = setInterval(function() {
if(!_times) { //是0就退出
clearInterval(_iIntervalID);
}
_times <= 0 || _times--; //如果是正数就 --
_self = $(_selector); //再次选择
if( _self.length ) { //判断是否取到
func && func.call(_self);
clearInterval(_iIntervalID);
}
}, _interval);
}
return this;
}
$("table.syntaxhighlighter").wait(function() {
$('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>");
});
$(document).on("click", ".cnblogs_code_footer",function(){
$(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide();
});
$('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}});
</script></body><!-- Matomo --><script> var _paq = window._paq = window._paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="https://tongji.php.cn/";
_paq.push(['setTrackerUrl', u+'matomo.php']);
_paq.push(['setSiteId', '9']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
})();
</script><!-- End Matomo Code --></html>
