تصف هذه المقالة تطبيق 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 مع معرف map_canvas ، ونمط DIV المخصص ، ويتم تحميل الخريطة تلقائيًا عند تشغيل موقع الويب ؛
الرمز المحدد كما يلي
<html xmlns = "http://www.w3.org/1999/xhtml"> <head runat = "server"> <title> </title> <style type = "text/css"> html {height: auto ؛ {Width: 1000px ؛ الارتفاع: 500px ؛ الموضع: absolute ؛}@media print {#map_canvas {height: 950px ؛}} </style> <script src = "http://xiazai.vevb.com/201409/Other/API_V2.5.1.JS" type = "text/javaScript"> </script> <script> window.onload = function () {var map = new sogou.maps.map (document.getElementById ("map_canvas") ، {}) ؛} </script> </head> <body> <ponder> </form> </body> </html>حدد عرض خريطة Mocheng
رمز المفتاح كما يلي:
window.onload = function () {var myoptions = {Zoom: 10 ، المركز: new sogou.maps.point (12956000 ، 4824875)} ؛ }فهم خصائص الخريطة
اذكر بعض الخصائص الشائعة الاستخدام مثل: حركة الخريطة ، تحويل نوع الخريطة ، القفز إلى المدن المخصصة
الرمز المحدد كما يلي
<html xmlns = "http://www.w3.org/1999/xhtml"> <head id = "head1" runat = "server"> <title> </title> <style type = "text/css"> html {height: auto ؛ {Width: 1000px ؛ الارتفاع: 500px ؛ الموضع: absolute ؛}@media print {#map_canvas {height: 950px ؛}} </style> <script src = "http://xiazai.vevb.com/201409/Other/API_V2.5.1.JS" type = "text/javaScript"> </script> <script> var map ؛ // إنشاء window window. myOptions);//Create map}//SetMapTypeId method example function setMapTypeId(num) { //Set map type, such as: //sogou.maps.MapTypeId.ROADMAP Normal map//sogou.maps.MapTypeId.SATELLITE Satellite map//sogou.maps.MapTypeId.HYBRID Satellite and road network mixed MAP // map.setmaptypeid (sogou.maps.maptypeid.hybrid) Switch (num) {case 1: map.setMaptypeid (sogou.maps.maptypeid.roadmap) ؛ استراحة؛ // حالة الخريطة العادية 2: map.setmaptypeid (sogou.maps.maptypeid.satellite) ؛ استراحة؛ // Case Map Case 3: map.setmaptypeid (sogou.maps.maptypeid.hybrid) ؛ استراحة؛ . 12 ، maptypeid: sogou.maps.maptypeid.roadmap})} // يوضح طريقة setCenter أن المناطق المحددة A و B هي إحداثيات MAP و C هي SetCenter Setcenter (A ، B ، C) {map.setCenter (sogou.maps.point {// قم بتعيين نطاق بالقرب من حدود المدينة المحرمة = new sogou.maps.bounds (12955101 ، 4824738 ، 12958355 ، 4827449) ؛ // قم بتعيين الخريطة لعرض كل هذا النطاق // ملاحظة: بدلاً من إعداد الحدود على هذه القيمة ، اضبط مع خريطة الموضع المناسبة. fitbounds (الحدود)} </script> </head> <body> <form id = "form1" button = "server"> <value input OnClick = "setMapTypeId (2)" type = "button"/> <input value = "Matelite and Road Network Mixed Map" OnClick = "SetMaptypeid (3)" type = "button"/> <input value = "move" onclick = "panby (200،0)" type = "button"/> type = "button"/> <input value = "move up" onClick = "panby (0،200)" type = "button"/> <input value = "move down" onClick = "0 ، -200) type = "button"/> <input value = "tianjin" onClick = "setCenter (13046000،4714250،10)" type = "button"/> <inputخريطة خصائص السكتة الدماغية
إنها سمة مهمة للغاية على الخريطة. تعد إضافة نقاط التتبع إلى الخريطة سمة طريقة شائعة.
يوفر Sogou API نوعين من السكتات الدماغية لملء السكتات الدماغية. السكتات الافتراضية والسكتات الدماغية الإضافة الديناميكية.
تتم إضافة السكتات الافتراضية:
var location = new sogou.maps.point (12956000 ، 4824875) ؛ // حدد موقع Slash Position var map = new sogou.maps.map (document.getElementById ("map_canvas") ، {}) ؛ .إضافة السكتة الدماغية الديناميكية
window.onload = function () {// تهيئة خريطة الخريطة = new sogou.maps.map (document.getElementById ("map_canvas") ، {}) ؛ // إضافة انقر فوق حدث لـ map sogou.maps.event.addlistener (map ، '، function (event) {var marker1 = new sogou.maps. }) ؛ }قياس المدى بناءً على نقطتي السكتة الدماغية
// احصل على المثال الوحيد لوظيفة الفئة getInstance (a) {A.HasOwnProperty ("_ مثيل") || (A._instance = جديد A) ؛ إرجاع A._instance} // نقطتان متصلتان خطوط الوظائف (mylatlng ، mypoint) {var converter = getInstance (sogou.maps.converter) ؛ var distant = converter.distance (mylatlng ، mypoint) ؛ // نقطتان Link Var line = new sogou.maps.polyline ({path: [mylatlng ، mypoint] ، strokecolor: "#ff0000" ، strokeopacity: 1.0 ، strokeweight: 1 ، title: parseint (المسافة) + "meter" ، الخريطة: الخريطة}) ؛ }يتم تصنيع وحدة صغيرة بناءً على الخصائص المذكورة أعلاه ، والرمز النطاق الديناميكي على الخريطة كما يلي:
<html xmlns = "http://www.w3.org/1999/xhtml"> <head id = "head1" runat = "server"> <title> </title> <style type = "text/css"> html {height: auto ؛ {العرض: 1000px ؛ الارتفاع: 500px ؛ الموضع: absomute ؛}@media print {#map_canvas {height: 950px ؛}} </style> <script src = "http://xiazai.vevb.com/201409/Other/api_v2.5 var map ؛ var num ؛ var leader ؛ // احصل على المثال الوحيد لوظيفة الفئة getInstance (a) {A.HasOwnProperty ("_ مثيل") || (A._instance = جديد A) ؛ إرجاع A._instance} window.onload = function () {// تهيئة خريطة الخريطة = new sogou.maps.map (document.getElementById ("map_canvas") ، {}) ؛ } وظيفة addCJ () {var myPoint ؛ var mypoint ؛ num = 0 ؛ // أضف حدث انقر فوق الخريطة ، وعرض الإحداثيات الحالية بعد النقر وإضافة انقر فوق Strokes Beasher = sogou.maps.event.addlistener (خريطة ، "انقر فوق" ، وظيفة (حدث) {if (num == 0) خطوط (MyPoint ، MyPoint) ؛ } دالة delcj () {sogou.maps.event.removelistener (المستمع)} // نقطتين خطوط وظائف متصلة (mylatlng ، mypoint) {var converter = getInstance (sogou.maps.convertor) ؛ var distant = converter.distance (mylatlng ، mypoint) ؛ // نقطتان مرتبطتان line var = new sogou.maps.polyline ({path: [mylatlng ، mypoint] ، strokecolor: "#ff0000" ، strokeopacity: 1.0 ، strokeweight: 1 ، title: parseint (المسافة) + علامة تحديدلة (mylatlng ، parseint (المسافة)) ؛ } // إضافة نقاط تتبع ديناميكيًا وإنشاء نقاط تتبع استنادًا إلى دالة الإحداثيات المحددة (الموقع ، 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> <form1 id = "form1" runat = "server"> <input type = "button" value = "range regurement" onClick = "addCJ ()" /> <input type = "button" value = "cancel ranging" onClick = "delcj () id = "map_canvas"> </viv> </form> </body> </html>آمل أن تكون هذه المقالة مفيدة لتطوير خريطة Sogou للجميع