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

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' )});

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.