SOSO 지도 API 사용법 (1) map_javascript 스킬에 원을 그리는 구현 아이디어 및 코드

서문 : 최근 SOSO 지도 관련 개발을 하다가 원 그리기에 대한 지식을 접하게 되어 간단하게 여기에 기록합니다. 1. 페이지에 SOSO Map API 참조 추가, 참조 스크립트 :

코드 복사 코드 다음과 같습니다: 2. 다음과 같이 새 지도 DIV 컨테이너를 만듭니다. : 코드 복사 코드는 다음과 같습니다. 3. 지도 초기화 : 코드 복사 코드는 다음과 같습니다. var center=new soso.maps.LatLng(22.540551,113.934593); var map=new soso.maps.Map(document.getElementById("container"),{ center:center, Zoom Level:14 }); 4. 원형 객체 생성 : 코드 복사 코드는 다음과 같습니다. var Circle=new soso.maps.Circle({ map:map, 중심:중심, 반경:1000, fillColor:"#00f", fillOpacity:0.3, 스트로크 무게:2 }); 5. 아름다움을 위해 원 A 중심점을 설정합니다. 코드는 다음과 같습니다 : 코드 복사 코드는 다음과 같습니다. var marker = new soso.maps.Marker({ position: center, map: map }); var 앵커 = new soso.maps.Point(0, 0), size = new soso.maps.Size(27, 35), icon = new soso.maps.MarkerImage('http:/ /s.map.soso.com/themes/default/img/centermarker.png' , size//이미지 부분의 크기 지정 , 앵커//아이콘의 앵커 포인트를 지정하는데 사용되며, 기본값은 아이콘 중앙의 위치이고, 아이콘의 위치를 지정할 수 있으며, 기본값은 이미지의 왼쪽 상단 모서리에 정렬됩니다. , new soso.maps.Point(0, 0)//사용할 그림 부분을 지정합니다. 픽셀 좌표는 그림의 왼쪽 상단을 기준으로 합니다. , new soso.maps.Size(27 , 35)//그림 지정 .maps.MarkerDecoration({ content: '', margin: new soso.maps.Size(0, -4), align: soso의 원본 크기 .maps.ALIGN.CENTER, marker: marker });

6. 위 인코딩을 완료하면 아래와 같은 원이 생깁니다 7. 구체적인 코드는 다음과 같습니다 : 코드 복사 코드 다음과 같습니다: SOSOMap *{ 여백:0px; 패딩:0px; } 본문, 버튼, 입력, 선택, 텍스트 영역 { 글꼴: 12px/16px Verdana, Helvetica, Arial, sans-serif; } #info{ width:603px; padding-top:3px; Overflow:hidden; } .btn{ 너비:190px; } function init(){ var center=new soso.maps.LatLng(22.540551,113.934593 ); var map=new soso.maps.Map(document.getElementById("container"),{ center:center, ZoomLevel:14 }); var Circle= new soso.maps.Circle({ map:map, center:center, radius:1000, fillColor:"#00f", fillOpacity:0.3, 스트로크웨이트 :2 }); var marker = new soso.maps.Marker({ position: center, map: map }); var 앵커 = new soso. maps.Point(0, 0), 크기 = new soso.maps.Size(27, 35), 아이콘 = new soso.maps.MarkerImage('http://s.map.soso.com /themes/default/img/centermarker.png' , size//指定使用图文分分象大影 , 앵커//용 来指 정 图标 锚点 默认为图标心的位置 , 신규 soso.maps.Point(0, 0)//指定使用图 Images 哪 一 PART , 同对图文左上角 의 영상 素坐标 , 새로운 soso.maps.Size(27, 35)//指 定 图文 的 原始大小 , new soso.maps.Size(-12, -30));//向左偏12px,向上偏30px marker.setIcon(icon); var decor = new soso.maps.MarkerDecoration( { 콘텐츠: '', 여백: new soso.maps.Size(0, -4), 정렬: soso.maps.ALIGN.CENTER, 마커: 마커 } ); var path1 = [ 센터 ]; 경로 : path1, strokecolor : '#000000', 스트로크 무게: 5, 스트로크 불투명도: 1, editable:false, map: map }); /* soso.maps .Event.addListener(맵, 'zoomlevel_changed',function() { Circle.setMap(null);console.log(map); Circle.setMap(map); }); */ } window.onload=init;

SOSO 지도 API 사용법 (1) map_javascript 스킬에 원을 그리는 구현 아이디어 및 코드

관련 기사