51Map 맵 인터페이스(샘플코드)_javascript 스킬 구현-JS 튜토리얼-php.cn

51Map 맵 인터페이스(샘플코드)_javascript 스킬 구현

WBOY

풀어 주다： 2016-05-16 17:13:11

원래의

1338명이 탐색했습니다.

51Map은 지도 인터페이스를 무료로 제공하며, 지리적 위치 라벨링, 저장, 수정, 에코 기능을 구현한 호출 인터페이스입니다.
51 지도 URL: http://api.51ditu.com/

웹 페이지에

코드 복사를 소개합니다. 코드는 다음과 같습니다.

지도에 표시:

코드 복사 코드는 다음과 같습니다.

 //지도 주석
 $( document).ready(function() {
 var ico=new LTIcon("",[24,24],[12,12] );
 var map= new LTMaps("mapdiv");//지도 객체
 var controlB; //마커 제어
 map.centerAndZoom("tianjin",5);//Tianjin
 map.handleMouseScroll();// 마우스 휠
 var controlZoom = new LTStandMapControl();//Zoom control
 map.addControl( controlZoom);
 controlB = new LTMarkControl();//마크 추가 이벤트를 제어하고 버튼에 바인딩
 controlB.setVisible(false);
 document.getElementById("addPosition").onclick=function (){controlB.btnClick()};
 map.addControl( controlB );
 LTEvent.addListener ( controlB,"mouseup",function(){getPoi(controlB)} );
 })

코드 복사 코드는 다음과 같습니다.

//마크업 추가 시 이 함수를 실행합니다.
function getPoi(controlB){
var poi = controlB.getMarkControlPoint();
$ ("#x").val(poi.getLongitude()); //x,y는 입력 태그 ID이며 백그라운드 저장 위치로 전달됩니다.
$("#y").val(poi.getLatitude() ;

style="color: #D01E14; 글꼴 무게: 굵게; 글꼴 크기: 12px;"> 지도가 보이지 않으면 여기를 클릭하세요

🎜>

코드 복사 코드는 다음과 같습니다.

 //맵 echo
 $(document).ready(function(){
 map("mapdiv");
 })
 //맵
 function map(div){
 var map=new LTMaps(div);// 지도 객체
 var marker=new LTMarker(new LTPoint($("#x").val(),$(" #y").val()));//마크 생성

map.handleMouseScroll ();//마우스 휠 확대/축소
map.centerAndZoom(new LTPoint($("#x").val() ,$("#y").val()),5); //좌표 포함 중심에 대한 지도 표시
map.addOverLay(marker) //지도에 마커 추가

} 지도의 마커 수정:

코드 복사

코드는 다음과 같습니다.

 //Map echo
 $(document).ready(function(){
 map("mapdiv");
 })
 //Map
 함수 맵 (div){
 var map=new LTMaps(div);//지도 객체
 var marker=new LTMarker(new LTPoint($("#x").val(),$("#y " ).val()));//라벨 생성
 map.handleMouseScroll();//마우스 휠 확대/축소
 map.centerAndZoom(new LTPoint($("#x").val(),$ ( "#y").val()),5); //좌표를 중심으로 지도 표시
 map.addOverLay(marker) //지도에 마커 추가
 var controlZoom = new LTStandMapControl( ); 
 map.addControl( controlZoom );
 //표시 컨트롤을 추가하고 이벤트를 버튼에 바인딩합니다
 var controlB = new LTMarkControl();//컨트롤 표시
 controlB.setVisible (false); 
 document.getElementById("addPosition").onclick=function (){map.removeOverLay(marker,true);controlB.btnClick()};
 map.addControl( controlB );
 LTEvent.addListener (controlB,"mouseup",function(){getPoi(controlB)} );
 }
 //주석 추가 시 이 함수 실행
 function getPoi(controlB){
 var poi = controlB.getMarkControlPoint();
 $("#x").val(poi.getLongitude());
 $("#y").val(poi.getLatitude());
 }

기타 매개변수 설정:
라벨 아이콘 스타일을 맞춤 설정할 수 있습니다

코드 복사 코드는 다음과 같습니다.

var ico=new LTIcon("",[24,24], [12,12]);// 아이콘 객체 생성
var marker=new LTMarker(new LTPoint($("#x").val(),$("#y").val()),ico );//마크 생성
 //마크 위로 마우스를 이동하면 마크 내용이 표시됩니다. 
LTEvent.addListener( marker , "mouseover" , function(){this.openInfoWinHtml('mark content' )});