บทความนี้อธิบายการประยุกต์ใช้ 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"), {});}สร้าง div ด้วย id map_canvas สไตล์ div ที่กำหนดเองและแผนที่จะถูกโหลดโดยอัตโนมัติเมื่อเว็บไซต์ทำงาน
รหัสเฉพาะมีดังนี้
<html xmlns = "http://www.w3.org/1999/xhtml"> <head runat = "เซิร์ฟเวอร์"> <title> </title> <style type = "text/css"> html {ความสูง: auto;} body {ความสูง: auto; {width: 1000px; ความสูง: 500px; ตำแหน่ง: สัมบูรณ์;}@สื่อพิมพ์ {#map_canvas {ความสูง: 950px;}}} </style> <script src = "http://xiazai.vevb.com/201409/api_v2. type = "text/javaScript"> </script> <plind> window.onload = function () {var map = new sogou.maps.map (document.getElementById ("map_canvas"), {});} </script> </head> <body> </form> </body> </html>ระบุการแสดงแผนที่ Mocheng
รหัสคีย์มีดังนี้:
window.onload = function () {var myoptions = {zoom: 10, ศูนย์: ใหม่ sogou.maps.point (12956000, 4824875)}; // พิกัดเมืองพิกัดนี้เป็นจุดพิกัด Var map = new Sogou.maps.map -ทำความเข้าใจคุณสมบัติแผนที่
แสดงรายการคุณสมบัติที่ใช้กันทั่วไปเช่น: การเคลื่อนไหวของแผนที่, การแปลงประเภทแผนที่, ข้ามไปยังเมืองที่กำหนด
รหัสเฉพาะมีดังนี้
<html xmlns = "http://www.w3.org/1999/xhtml"> <head id = "head1" runat = "เซิร์ฟเวอร์"> <title> </title> {width: 1000px; ความสูง: 500px; ตำแหน่ง: สัมบูรณ์;}@สื่อพิมพ์ {#map_canvas {ความสูง: 950px;}} </style> <script src = "http://xiazai.vevb.com/201409/Ather/api_v2. แผนที่; // สร้าง window ตัวแปรส่วนกลาง onload = function () {var myoptions = {ซูม: 10, ศูนย์: ใหม่ sogou.maps.point (12956000, 4824875)}; // ระบุแผนที่เมือง = new Sogou.maps.map ฟังก์ชั่นตัวอย่าง setMapTypeId (num) {// ตั้งค่าประเภทแผนที่เช่น: //sogou.maps.maptypeid.roadmap แผนที่ปกติ // sogou.maps.maptypeid.satellite map // sogou.maps.maptypeid.hybrid.hybrid แผนที่ // map.setMapTypeId (sogou.maps.maptypeid.hybrid) สวิตช์ (num) {กรณีที่ 1: map.setMapTypeId (sogou.maps.maptypeid.roadmap); หยุดพัก; // MAP ปกติกรณี 2: map.setMapTypeId (sogou.maps.maptypeid.satellite); หยุดพัก; // แผนที่ดาวเทียมกรณีที่ 3: map.setMapTypeId (sogou.maps.maptypeid.hybrid); หยุดพัก; // ดาวเทียมและเครือข่ายถนนผสมแผนที่}} // วิธีการตัวอย่างแผนที่แผนที่การเคลื่อนย้ายฟังก์ชั่นด้วยตนเอง (a, b) {map.panby (a, b)} // ตัวอย่างเมธอด setoptions แสดงฟังก์ชั่นภูมิภาคที่ระบุ setoptions () {// ตั้งค่าศูนย์แผนที่ระดับและแผนที่ 12, MapTypeId: sogou.maps.maptypeid.roadmap})} // ตัวอย่างเมธอด setCenter แสดงให้เห็นว่าภูมิภาคที่ระบุ A และ B เป็นพิกัดแผนที่และ C เป็นฟังก์ชันระดับแผนที่ SetCenter (A, B, C) {map.setCenter {// ตั้งค่าช่วงใกล้กับเขตเมืองที่ต้องห้าม = New Sogou.maps.bounds (12955101, 4824738, 12958355, 4827449); // ตั้งค่าแผนที่เพื่อแสดงช่วงทั้งหมดนี้ // หมายเหตุ: แทนที่จะตั้งค่าขอบเขตเป็นค่านี้ให้ปรับไปยังแผนที่ตำแหน่งที่เหมาะสม fitbounds (ขอบเขต)} </script> </head> <body> <form id = "form1" runat = "เซิร์ฟเวอร์"> <ค่าอินพุต = "แผนที่ปกติ" onclick = "setMapTypeId (2)" type = "ปุ่ม"/> <ค่าอินพุต = "แผนที่ดาวเทียมและถนนผสมแผนที่" onClick = "setMapTypeId (3)" type = "ปุ่ม"/> <ค่าอินพุต = "ย้ายซ้าย" onClick = "panby (200,0) <ค่าอินพุต = "เลื่อนขึ้น" onClick = "panby (0,200)" type = "ปุ่ม"/> <ค่าอินพุต = "เลื่อนลง" onClick = "panby (0, -200)" type = "ปุ่ม"/> <ค่าอินพุต = "เลื่อนขึ้น" onclick = "panby (0, -200) <ค่าอินพุต = "tianjin" onclick = "setCenter (13046000,4714250,10)" type = "ปุ่ม"/> <ค่าอินพุต = "Forbidden City" onClick = "fitBounds ()" type = "ปุ่ม"/> <div id = "MAP_CANVAS"คุณสมบัติของ MAP Stroke
มันเป็นคุณลักษณะที่สำคัญมากบนแผนที่ การเพิ่มคะแนนการติดตามไปยังแผนที่เป็นแอตทริบิวต์วิธีการทั่วไป
Sogou API จัดเตรียมจังหวะสองประเภทเพื่อเติมเต็มในจังหวะ จังหวะเริ่มต้นและจังหวะการเพิ่มแบบไดนามิก
มีการเพิ่มจังหวะเริ่มต้น:
var location = new Sogou.Maps.Point (12956000, 4824875); // ระบุตำแหน่งจุดสแลช var map = ใหม่ sogou.maps.map (document.getElementById ("MAP_CANVAS"), {}); // เริ่มต้น MAP VAR MARKER = ใหม่ SOGOU.MAPS.MARKER ({ตำแหน่ง: ตำแหน่ง, // วาดชื่อพิกัดชื่อ: "จุดวาด", // การวาดชื่อจุดชื่อ: {มองเห็นได้: จริง, จัดตำแหน่ง: "ด้านล่าง"}, // การวาดจุดการเพิ่มจังหวะแบบไดนามิก
window.onload = function () {// เริ่มต้นแผนที่ map = ใหม่ sogou.maps.map (document.getElementById ("map_canvas"), {}); // เพิ่มเหตุการณ์คลิกสำหรับแผนที่ sogou.maps.event.addlistener (แผนที่ 'คลิก' - -การวัดช่วงขึ้นอยู่กับสองจุดจังหวะ
// รับตัวอย่างเดียวของฟังก์ชั่นคลาส getInstance (a) {a.hasownproperty ("_ อินสแตนซ์") || (a._instance = ใหม่ 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", แผนที่: แผนที่}); -โมดูลขนาดเล็กจะทำตามคุณสมบัติข้างต้นและรหัสแบบไดนามิกบนแผนที่มีดังนี้:
<html xmlns = "http://www.w3.org/1999/xhtml"> <head id = "head1" runat = "เซิร์ฟเวอร์"> <title> </title> {width: 1000px; ความสูง: 500px; ตำแหน่ง: สัมบูรณ์;}@สื่อพิมพ์ {#map_canvas {ความสูง: 950px;}} </style> <script src = "http://xiazai.vevb.com/201409/Ather/api_v2. แผนที่; var num; var listener; // รับตัวอย่างเดียวของฟังก์ชั่นคลาส getInstance (a) {a.hasownproperty ("_ อินสแตนซ์") || (a._instance = ใหม่ a); return a._instance} window.onload = function () {// เริ่มต้นแผนที่แผนที่ = ใหม่ sogou.maps.map (document.getElementById ("map_canvas"), {}); } ฟังก์ชั่น addcj () {var mypoint; var mypoint; num = 0; // เพิ่มเหตุการณ์คลิกลงในแผนที่แสดงพิกัดปัจจุบันหลังจากคลิกและเพิ่มคลิก strokes listener = sogou.maps.event.addlistener (แผนที่ 'คลิก' ฟังก์ชั่น (เหตุการณ์) {ถ้า (num == 0) {mypoint = mypoint = event.point; // ตำแหน่ง} (MyPoint, MyPoint); } function delcj () {sogou.maps.event.remoVelistener (ผู้ฟัง)} // สองจุดเชื่อมต่อบรรทัดฟังก์ชัน (mylatlng, myPoint) {var converter = getInstance (sogou.maps.convertor); ระยะ var = converter.distance (mylatlng, mypoint); // สองจุดเชื่อมโยงกับบรรทัด var = ใหม่ sogou.maps.polyline ({path: [mylatlng, mypoint], strokecolor: "#ff0000", strokeopacity: 1.0, strokeweight: 1, ชื่อ: parseint (ระยะทาง) + "เมตร", แผนที่: แผนที่}); placemarker (mylatlng, parseint (ระยะทาง)); } // เพิ่มจุดติดตามแบบไดนามิกและสร้างจุดติดตามตามฟังก์ชันพิกัดที่ระบุตำแหน่ง placemarker (ตำแหน่ง, jl) {var clickedLocation = ตำแหน่ง; var marker1 = ใหม่ sogou.maps.marker ({ตำแหน่ง: ตำแหน่ง, ชื่อเรื่อง: jl+"เมตร", ฉลาก: {มองเห็นได้: จริง, จัดเรียง: "ด้านล่าง"}, แผนที่: แผนที่}); } ฟังก์ชั่น mapClear () {num = 0; map.clearall (); } </script> </head> <body> <form id = "form1" runat = "เซิร์ฟเวอร์"> <อินพุต type = "ปุ่ม" value = "การวัดระยะ" onclick = "addcj ()" /> <อินพุต type = "ปุ่ม" value = "ยกเลิก id = "MAP_CANVAS"> </div> </form> </body> </html>ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการพัฒนาแผนที่ Sogou ของทุกคน