이 기사에서는 매우 실용적인 기술 인 Sogou Map API의 적용에 대해 설명합니다. 참조를 위해 공유하십시오. 특정 구현 방법은 다음과 같습니다.
지도의 초기화
1. 맵을 참조하는 API 파일을 추가하십시오.
<script src = "http://xiazai.vevb.com/201409/other/api_v2.5.1.js"type = "text/javaScript"> </script>
2. 웹 사이트 초기화로드 이벤트 :
window.onload = function () {var map = new sogou.maps.map (document.getElementByid ( "map_canvas"), {});}ID MAP_CANVAS, 사용자 정의 DIV 스타일로 DIV를 만듭니다. 웹 사이트가 실행될 때지도가 자동으로로드됩니다.
특정 코드는 다음과 같습니다
<html xmlns = "http://www.w3.org/1999/xhtml"> <Head Runat = "Server"> <title> </title> <style type = "text/css"> html {auto;} body {auto; margin : 0; padding : 0;}#map_canvas. {너비 : 1000px; 높이 : 500px; 위치 : 절대;}@media print {#map_canvas {height : 950px;}} </style> <script src = "http://xiazai.vevb.com/201409/other/api_v2.5.1.js" "text/javaScript"> </script> <cript> wind </form> </body> </html>Mocheng지도의 디스플레이를 지정하십시오
키 코드는 다음과 같습니다.
wind }
지도 속성 이해
다음과 같이 일반적으로 사용되는 일부 속성을 나열하십시오. 맵 이동,지도 유형 변환, 지정된 도시로의 점프
특정 코드는 다음과 같습니다
<html xmlns = "http://www.w3.org/1999/xhtml"> <head id = "head1"runat = "server"> <title> </title> <style type = "text/css"> html {높이 : auto;} body {auto : 0; padding : 0; {너비 : 1000px; 높이 : 500px; 위치 : 절대;}@media print {#map_canvas {height : 950px;}} </style> <script src = "http://xiazai.vevb.com/201409/other/api_v2.5.1.js" 유형 = "text/javaScript"> </script> <cript> var 맵; // 글로벌 변수 창을 만듭니다. myoptions); // map 만들기} // setMapTypeid 메서드 예제 함수 setMapTypeid (num) {// 맵 유형, 예 : //sogou.maps.maptypeid.roadmap 정상지도 // sogou.maps.maptypeid.satellite satellite satellite mix.maptypeid.maptypeid.maptypeid.maptypeid. map // map.setmaptypeid (sogou.maps.maptypeid.hybrid) switch (num) {case 1 : map.setmaptypeid (sogou.maps.maptypeid.roadmap); 부서지다; // 일반 맵 사례 2 : Map.SetMapTypeid (sogou.maps.maptypeid.satellite); 부서지다; // 위성 맵 사례 3 : Map.SetMapTypeid (sogou.maps.maptypeid.hybrid); 부서지다; // 위성 및 도로 네트워크 혼합지도}} // Panby 메소드 예제 맵 수동으로 기능 Panby (a, b) {map.panby (a, b)} // setOptions 메소드 예제를 표시합니다. 지정된 영역 setOptions () {// 맵 센터, 레벨 및 type map.setOptions ({center : new sogou.maps.point (135200, 364103)). mapTypeid : sogou.maps.maptypeid.roadmap})} // setCenter 메소드 예제 예제는 지정된 영역 a와 b가 맵 좌표임을 보여줍니다. 맵 레벨 함수 setCenter (a, b, c) {map.setCenter (new sogou.maps.point (a, b), c) {fitbounds spects the Speed functions finter functions fittbound // 금지 된 도시 var bounds = new sogou.maps.bounds (12955101, 4824738, 12958355, 4827449) 근처에 범위를 설정; //이 모든 범위를 표시하도록 맵을 설정하십시오. 참고 :이 값으로 경계를 설정하는 대신 적절한 위치 map.fitbounds (bounds)} </script> </head id = "form 1"form1 "runat ="server "> <입력 값 ="정상지도 "onclick ="setMaptypeid (1) "type ="input value = input value = "satellite map" onclick = "setMapTypeid (2)"type = "button"/> <입력 값 = "위성 및 도로 네트워크 혼합 맵"onclick = "setMapTypeid (3)"type = "button"/> <input value = "left"onclick = "panby (200,0)"type = "button"value = "panby (-200,0)"onclick = "panby (-200,0)" 유형 = "버튼"/> <입력 값 = "이동"onclick = "Panby (0,200)"type = "button"/> <입력 값 = "이동"onclick = "panby (0, -200)"type = "type ="button "/<입력 값 ="onclick = "panby (0, -200)"value = "input value ="input value = "input value" onclick = "setOptions ()"type = "button"/> <input value = "tianjin"onclick = "setCenter (13046000,4714250,10)"type = "button"/> <input value = "forbidden city"on click = "fitbounds ()"type = "button"/> <div id = "map_canvas"> </form> </body> </html>획기성 특성
지도에서 매우 중요한 속성입니다. 트레이스 포인트를 맵에 추가하는 것은 일반적인 메소드 속성입니다.
Sogou API는 스트로크를 채우기 위해 두 가지 유형의 스트로크를 제공합니다. 기본 스트로크 및 동적 추가 스트로크.
기본 스트로크가 추가됩니다.
var location = new sogou.maps.point (12956000, 4824875); // 포인트 슬래시 위치를 지정하여 var map = new sogou.maps.map (document.getElementByid ( "map_canvas"), {}); // 맵 초기화 var 마커 = new sogou.maps.marker ({위치 : 위치, // 코디네이션 제목 : "Draw Point", // 포인트 이름 레이블 : {visible : true, align : "bottment"}, // point display map : map}); // addraw point to map동적 스트로크 첨가
window.onload = function () {// 맵 맵 = new sogou.maps.map (docut })); }두 스트로크 포인트를 기반으로 한 범위 측정
// 클래스 함수의 유일한 예제를 가져옵니다. (A._instance = New A); return A._instance} // 두 개의 점이 연결되어 있습니다 (mylatlng, mypoint) {var converter = getInstance (sogou.maps.converter); var 거리 = converter.distance (mylatlng, mypoint); // 두 가지 점 링크 var line = new sogou.maps.polyline ({path : [mylatlng, mypoint], strokecolor : "#ff0000", StrokeOpacity : 1.0, Strokeweight : 1, 제목 : parseint (거리) + "meter", map : map}); }위의 속성에 따라 작은 모듈이 만들어지고 맵의 동적 범위 코드는 다음과 같습니다.
<html xmlns = "http://www.w3.org/1999/xhtml"> <head id = "head1"runat = "server"> <title> </title> <style type = "text/css"> html {높이 : auto;} body {auto : 0; padding : 0; {width : 1000px; height : 500px; 위치 : 절대;}@media print {#map_canvas {height : 950px;}} </style> <script src = "http://xiazai.vevb.com/201409/other/api_v2.5.1.js"tept/javascript> </script> var 맵; var num; var 리스너; // 클래스 함수의 유일한 예제를 가져옵니다. (A._instance = New A); return A._instance} wind } 함수 addcj () {var mypoint; var mypoint; num = 0; // 맵에 클릭 이벤트를 추가하고 클릭 후 현재 좌표를 표시하고 클릭 스트로크 리스크를 추가하고 추가하십시오. 리스너 = sogou.maps.event.addlistener ( 'click', function (event) {num == 0) {myPoint = myPoint = event.point; // click 위치 = myPoint = myPoint. 라인 (MyPoint, MyPoint); } function delcj () {sogou.maps.event.removelistener (리스너)} // 두 가지 점이 연결되어 있습니다. var 거리 = converter.distance (mylatlng, mypoint); // 두 가지 점은 var line = new sogou.maps.polyline ({path : [mylatlng, mypoint], strokecolor : "#ff0000", strokeopacity : 1.0, strokeweight : 1, title : parseint (disting) + "meter", map}); placeMarker (mylatlng, parseint (거리)); } // 지정된 좌표 기능을 기반으로 추적 지점을 동적으로 추가하고 추적점을 만듭니다. function placeMarker (location, jl) {var clickedlocation = location; var marker1 = new sogou.maps.marker ({위치 : 위치, 제목 : jl+"meter", label : {visible : true, align : "bottom"}, map : map}); } 함수 mapClear () {num = 0; map.clearall (); } < /script> < /head> <body> <form id = "form1"runat = "server"> <input type = "button"value = "range measurement"onclick = "addcj ()" /> <입력 유형 = "value ="value "onclick ="value "onclick ="clare "on on mapclear ()"value = "value" id = "map_canvas"> </div> </form> </body> </html>이 기사가 모든 사람의 Sogou지도 개발에 도움이되기를 바랍니다.