javascript+mapbar 지도 포 지 셔 닝 실현

본문 지 도 는 도면 도 를 사용한다 지도 온라인 API 주소http://union.mapbar.com/apidoc/오프라인 CHM 형식 다운로드 주소: http://union.mapbar.com/apidoc/chm/mapbarapi.rar
효과 그림:

Mapbar 맵 API 는 자바 스 크 립 트 를 사용 하여 Mapbar 지 도 를 자신의 웹 페이지 에 삽입 할 수 있 습 니 다.API 는 지도 와 의 상호작용 을 제공 합 니 다http://www.mapbar.com/localsearch/index.html. 웹 페이지 에 표 시 된),그리고 일련의 지도 에 내용 을 추가 하 는 서비스 로 귀하 가 자신의 사이트 에서 안정 적 인 지도 응용 프로그램 을 만 들 수 있 습 니 다.공공 테스트 키:

 
http://union.mapbar.com/apis/maps/free?f=mapi&v=31.2&k=aCW9cItqL7sqT7AxaB0zdHZoZSWmbBsuT7JhMHTsMeD6ZIl9NzFsZHT=@JBL979@Iu7lJJZWWq0IDu9xZMzMxq7I9AhH7LAAA6hqzZHZZLTbZZauxlDz7C7DD9ZCFGT=

Mapbar 지 도 를 시도 하려 면 키 신청 절 차 를 생략 하고 공공 테스트 키 를 로 컬 에서 사용 할 수 있 습 니 다(http://localhost)테스트 를 진행한다.Internet Explorer 8.0 버 전에 호 환 문제 가 있 습 니 다.웹 페이지탭 에탭 을 추가 하여 지도 접 기 기능 이 올 바 르 게 실 행 될 수 있 도록 해 야 합 니 다.여 기 는 프론트 데스크 톱 부분 소스 코드 만 있 습 니 다.프로젝트 에서 ajax 로 포 지 셔 닝 지속 화 코드 를 실현 해 야 합 니 다.다음 과 같 습 니 다

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>      </title> 
<script type = "text/javascript" src = "http://union.mapbar.com/apis/maps/free?f=mapi&v=31.2&k=aCW9cItqL7..."></script> 
<script type="text/javascript"> 
var maplet=null;//     
var marker=null;//     
var le=null;//     
var myEventListener=null;//  click     
function initMap()//      
{ //        http://Qbit.cnblogs.com 
le=10; //       
maplet = new Maplet("mapbar"); 
//                                    
// : maplet.centerAndZoom(new MPoint(<%=  %>, <%=  %>),<%=    %>); 
maplet.centerAndZoom(new MPoint(116.38672, 39.90805), le);//                  
maplet.addControl(new MStandardControl()); 
} 
function setp() 
{ 
if (marker)//           
{ 
alert("        "); 
return; 
} 
maplet.setMode("bookmark");//          
maplet.setCursorIcon("tb1.gif"); //         
myEventListener = MEvent.bind(maplet, "click", this, addp); //  click     
} 
//              event 
function addp(event,point){ 
if(!marker){ 
marker = new MMarker( point, //   
new MIcon("mark.gif", 24, 24),//  ICO(  ,  ) 
new MInfoWindow("      ", "    "),//     
new MLabel("   ")//    
); 
marker.bEditable=true; 
marker.dragAnimation=true; 
maplet.addOverlay(marker);//     
marker.setEditable(true); //         
maplet.setMode("pan"); //       (  )   
le= maplet.getZoomLevel(); //         
document.getElementById("findp").style.display="block"; 
document.getElementById("delp").style.display="block"; 
document.getElementById("savep").style.display="block"; 
MEvent.removeListener(myEventListener);//     
} 
} 
//     
function find(){ 
maplet.centerAndZoom(marker.pt, le);//     
} 
//       
function del(){ 
//          
maplet.clearOverlays(true); 
location.reload(); //          bug                
/*document.getElementById("findp").style.display="none"; 
document.getElementById("delp").style.display="none"; 
document.getElementById("savep").style.display="none"; 
maplet=null; 
marker=null; 
myEventListener=null; 
initMap();*/ 
} 
//       
function savep() 
{ 
alert("     
  :"+marker.pt.lon+"
  :"+marker.pt.lat+"
    :"+le); 
} 
</script> 
</head> 
<body onload="initMap()"> 
<table width="501"> 
<tr><td><input type="button" value="    " onclick="setp()"/></td> 
<td><input type="button" id="findp" value="    " style="display:none;" onclick="find()"/></td> 
<td><input type="button" id="delp" value="    " style="display:none;" onclick="del()"/></td> 
<td><input type="button" id="savep" value="  " style="display:none;" onclick="savep()"/></td> 
</tr> 
<tr><td colspan="4"><div id="mapbar" style="width:500px;height:300px"></div> 
</td></tr> 
</table> 
</body> 
</html>

소스 다운로드 주소:http://xiazai.jb51.net/201004/yuanma/mapbar.rar

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

Thymeleaf 의 일반 양식 제출 과 AJAX 제출

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

javascript+mapbar 지도 포 지 셔 닝 실현

좋은 웹페이지 즐겨찾기