Sogou Map API Contoh Penggunaan Tutorial

Penulis：Eve Cole Waktu Pembaruan：2025-04-09 07:48:02

Artikel ini menjelaskan penerapan API Sogou Map, yang merupakan teknik yang sangat praktis. Bagikan untuk referensi Anda. Metode implementasi spesifik adalah sebagai berikut:

Inisialisasi peta

1. Tambahkan file API yang merujuk peta:

 <skrip src = "http://xiazai.vevb.com/201409/other/api_v2.5.1.js" type = "text/javascript"> </script>

2. Acara pemuatan inisialisasi situs web:

 window.onload = function () {var map = new sogou.maps.map (document.geteLementById ("map_canvas"), {});}

Buat Div dengan ID MAP_CANVAS, Gaya Div Kustom, dan peta secara otomatis dimuat saat situs web berjalan;

Kode spesifiknya adalah sebagai berikut

 <html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title></title> <style type="text/css">html {height: auto;}body {height: auto;margin: 0;padding: 0;}#map_canvas {width: 1000px; tinggi: 500px; Posisi: absolute;}@media cetak {#map_canvas {height: 950px;}} </style> <script src = "http://xiazai.vevb.com/201409/other/aprips/jepitan/jepitan/jepitan/201409/apript/20140/209/srips = = function () {var map = new sogou.maps.map (document.geteLementById ("map_canvas"), {});} </script> </head> <body> <bentuk id = "form1" runat = "server"> <div id = "peta_canvas"> </div> </form> </server "> <Div ID =" MAP_CANVAS "> </Div> </Form> </Body>

Tentukan tampilan peta mocheng

Kode kuncinya adalah sebagai berikut:

 window.onload = function () {var myoptions = {zoom: 10, center: new sogou.maps.point (12956000, 4824875)}; // koordinat kota, koordinat ini adalah koordinat var peta = new sogou.maps.map (document.getelementbyid ("peta_canvas); myoptions); myoptions (document.getelementbyid (" Mapervas "); myoptions (document.getElementById (" MAPERVASE ("MAPERVAS (" Document.getElementByID ("MAPERVAS (" MAPERVAS ("DOCURE DOCORY." MAPERVAS); }

Memahami properti peta

Sebutkan beberapa properti yang umum digunakan seperti: pergerakan peta, konversi jenis peta, lompat ke kota yang ditunjuk

Kode spesifiknya adalah sebagai berikut

 <html xmlns = "http://www.w3.org/1999/xhtml"> <head id = "head1" runat = "server"> <title> </ title> <style type = "text/css"> html {height: auto;} body {auto/css "> html {height: auto; auto;} body {auto: auto; auto; {width: 1000px; tinggi: 500px; Posisi: absolute;}@media cetak {#map_canvas {height: 950px;}} </style> <script src = "http://xiazai.vevb.com/201409/other/aprips.jrcript/jrips/20140/209/prips = peta; // Buat variabel global window.onload = function () {var myoptions = {zoom: 10, center: new sogou.maps.point (12956000, 4824875)}; // tentukan peta kota = fungsi sogou.maps.map (document.getElementByid ("map_canvas"); setMaptypeId (num) {// Setel peta, seperti: //sogou.maps.maptypeid.roadmap peta normal // sogou.maps.maptypeid.satellite peta satelit // sogou.maps.maptypeid.hybrid Satellite dan jaringan jalan campuran peta // map.setMaps.maptypeid.hybrid {case 1: map.setMaptypeId (sogou.maps.maptypeid.roadmap); merusak; // Kasing peta normal 2: map.setMaptypeId (sogou.maps.maptypeid.satellite); merusak; // Satellite Map Case 3: MAP.SetMaptypeID (Sogou.Maps.MaptypeID.hybrid); merusak; // Satelit dan Jaringan Jalan Peta Campuran}} // Metode Panby Contoh Peta Pindahkan Fungsi Panby (A, B) {Map.Panby (a, b)} // Metode setoptions Contoh menampilkan fungsi region yang ditentukan ({), center110.maps. 12, mapTypeId: sogou.maps.MapTypeId.ROADMAP })}//setCenter method example shows that the specified regions a and b are map coordinates and C are map level function setCenter(a, b, c) { map.setCenter(new sogou.maps.Point(a, b), c)}//fitBounds method example jumps to the specified range function fitBounds() { // Tetapkan rentang di dekat kota terlarang var bounds = new sogou.maps.bounds (12955101, 4824738, 12958355, 4827449); // Atur peta untuk menampilkan semua rentang ini // Catatan: Alih -alih mengatur batas dengan nilai ini, sesuaikan ke peta posisi yang sesuai. Fitbounds (BOUNDS)} </script> </head> <tomen> <form id = "form1" runat = "server"> <input value = "peta normal" onclick = "setMaptypeid (1)" type "" kancing = "kancing =" onclick = "setMaptypeid (1)" type "" kumpulan = "kumpulan =" kancing = "kancing =" setMaptypeid (1) "typle" "tappy =" tongkat = "tappy =" setMaptypeid (1) "typeid (1)" typon = "TOLKLICK =" setMaptypeid (1) OnClick = "setMaptypeId (2)" type = "Tombol"/> <input value = "satelit dan jaringan jalan campuran peta" onclick = "setMaptypeID (3)" type = "tombol"/> <input value = "pindahkan" "onclick =" panby (200,0) "type =" "/> <input value" panby = ",", ")" Typons ", Panby (200,0)" Typons = "," PANBY "PANBY", PANBY (200,0) " <input value = "pindahkan ke atas" onclick = "panby (0,200)" type = "tombol"/> <input value = "pindahkan ke bawah" onclick = "panby (0, -200)" type = "Tombol"/> <input value = "pindahkan" onclick = "Panby (0, -200)" Typeon "typon"/> <pindahkan "(nilai input =" panBy (0, -200) " type = "Tombol"/> <input value = "tianjin" onclick = "setCenter (13046000,4714250,10)" type = "Tombol"/> <input value = "Forbidden City" OnClick = "FitBounds ()" Type = "Tombol"/<Div ID = "MAP_CANVAS"> </Dive> </form </form </form </form </form </for/</<piv id = "MAP_CANVAS"> </Dive> BOGY> </FORMET//</DIV ID = "MAP_CANVAS"> </dive> form = </form </form </form </uchy </dif ID = "MAP_CANVAS"> </Divor> BOY//</BOGY </BOGY </DIV ID = "MAP_CANVAS ">

Peta Properti Stroke

Ini adalah atribut yang sangat penting di peta. Menambahkan titik jejak ke peta adalah atribut metode umum.

Sogou API menyediakan dua jenis stroke untuk mengisi stroke. Stroke default dan stroke penambahan dinamis.

Stroke default ditambahkan:

 var location = new Sogou.maps.point (12956000, 4824875); // Tentukan posisi titik-slash var peta = new sogou.maps.map (document.getElementById ("map_canvas"), {}); // inisialisasi peta var marker = new sogou.maps.marker ({position: location, // menggambar judul koordinat: "draw point", // draw point name label: {visible: true, align: "Bottom"}, // Draw Point Display Form Peta: peta,}); // addraw titik peta ke peta

Penambahan stroke dinamis

 window.onload = function () { //Initialize map map = new sogou.maps.Map(document.getElementById("map_canvas"), {});//Add click event for the map sogou.maps.event.addListener(map, 'click', function (event) { var marker1 = new sogou.maps.Marker({ position: event.point, map: map }); }); }

Pengukuran rentang berdasarkan dua titik stroke

 // Dapatkan satu -satunya contoh fungsi kelas getInstance (a) {a.hasownproperty ("_ instance") || (a._instance = A New A); return A._instance} // Dua poin adalah garis fungsi yang terhubung (mylatlng, mypoint) {var converter = getInstance (sogou.maps.converter); var jarak = converter.distance (mylatlng, mypoint); // Dua poin tautan var line = new sogou.maps.polyline ({path: [mylatlng, mypoint], strokecolor: "#ff0000", strokeopacity: 1.0, strokeweight: 1, judul: parseint (jarak) + "meter", peta: peta}); }

Berdasarkan atribut di atas, modul kecil dibuat, dan kode rentang dinamis pada peta adalah sebagai berikut:

 <html xmlns = "http://www.w3.org/1999/xhtml"> <head id = "head1" runat = "server"> <title> </ title> <style type = "text/css"> html {height: auto;} body {auto/css "> html {height: auto; auto;} body {auto: auto; auto; {width: 1000px; tinggi: 500px; Posisi: absolute;}@media cetak {#map_canvas {height: 950px;}} </style> <script src = "http://xiazai.vevb.com/201409/other/aprips.js; num; var listener; // Dapatkan satu -satunya contoh fungsi kelas getInstance (a) {a.hasownproperty ("_ instance") || (a._instance = A New A); return A._instance} window.onload = function () {// inisialisasi peta peta = new sogou.maps.map (document.geteLementById ("map_canvas"), {}); } fungsi addCj () {var mypoint; var mypoint; num = 0; // Tambahkan Acara Klik ke peta, tampilkan koordinat saat ini setelah mengklik dan tambahkan klik strokes listener = sogou.maps.event.addlistener (peta, 'klik', fungsi (event) {if (num == 0) {mypoint = mypoint = event.point; point; // dapatkan koordinat posisi klik} lainnya {mypoint = mypoint = event = point; Baris (mypoint, mypoint); } function delcj () {sogou.maps.event.removeListener (pendengar)} // Dua poin adalah garis fungsi yang terhubung (mylatlng, mypoint) {var converter = getInstance (sogou.maps.convertor); var jarak = converter.distance (mylatlng, mypoint); // Dua poin ditautkan var line = new sogou.maps.polyline ({path: [mylatlng, mypoint], strokeColor: "#ff0000", strokeopacity: 1.0, strokeweight: 1, judul: parseint (jarak) + "meter", peta: peta}); placemarker (mylatlng, parseint (jarak)); } // Tambahkan titik penelusuran secara dinamis dan buat titik penelusuran berdasarkan fungsi koordinat yang ditentukan placemarker (lokasi, jl) {var clickedlocation = lokasi; var marker1 = new sogou.maps.marker ({position: location, title: jl+"meter", label: {visible: true, align: "Bottom"}, peta: peta}); } function mapClear () {num = 0; peta.clearall (); } </script> < /head> <body> <Form id = "form1" runat = "server"> <input type = "tombol" value = "range pengukuran" onclick = "addcj ()" /> <input type = "Tombol" value = "batal" onklick = "delcj ()" /<input type "nilai" nilai "nilai" clear "OnClick =" delcj () " /<input" value = "nilai" nilai "nilai" " ID = "MAP_CANVAS"> </div> </form> </body> </html>

Saya harap artikel ini akan membantu pengembangan peta sogou semua orang