Penerapan penentuan posisi geografis HTML5 dan peta alat baidu -ketiga

Saya melihat banyak Daniel teknis dan blog terkait, dan jarang menggambarkan posisi geografis HTML5.

Pertama, alasan penyedia layanan, karena penentuan posisi HTML5 disediakan oleh Google, karena Google telah memblokir daratan, fungsi penentuan posisi tidak didukung.

Kedua, posisi geografis datang dengan HTML5 memiliki kinerja yang buruk.

Karena penentuan posisi geografis adalah fitur baru HTML5, kita juga perlu belajar dan menguasai API terkait dan belajar cara menggunakan posisi geografis

Pertama pahami akal sehat

A Noun Geology:

Ini digunakan untuk mendapatkan koordinat geografis di mana browser saat ini berada, sehingga menyediakan LBS (layanan berbasis lokasi). data:

GEROLD: Longitude

Latitude: Latitude

Altitude: Altitude

Kecepatan: Kecepatan

Gunakan platform untuk dibagi menjadi akhir seluler dan PC:

(1) Browser seluler:

Cobalah pertama kali menggunakan data-in-in GPS- Accuracy didasarkan pada beras

Kemudian gunakan nomor stasiun pangkalan seluler untuk membalikkan akurasi posisi lokasi geografis yang sesuai ada di unit

(2) Browser PC:

Kueri terbalik melalui alamat IP komputer-

Topik:

Pertama -tama, kami menekan F12 untuk membuka konsol di browser dan memasukkan window.navigator.geology untuk melihat informasi penentuan posisi!

Kami melihat bahwa ada tiga metode utama dalam informasi penentuan posisi, dan artinya adalah:

 GetCurrentPosition: fn (succ, err) // Dapatkan data penentuan posisi saat ini, yang berisi WatchPosition, yang berhasil dan gagal mendapatkan dan gagal.

Sejak itu kami tahu cara menggunakan posisi geografis dalam file HTML5.

 <! {// Klik tombol untuk memicu navigator.geolocation.getCurrentPosition (succcb, errcb); Persimpangan console.log ('berhasil mendapatkan data penentuan posisi'); '+Pos.coords.altitude); Persimpangan Console.log ('Dapatkan data penentuan posisi yang gagal'); }} </script> </body> </html>

Seperti yang ditunjukkan pada gambar, ketika tombol klik, data penentuan posisi berhasil diperoleh, tetapi tinggi dan kecepatannya nol karena sisi PC, jadi kita hanya perlu mengingat satu metode untuk mendapatkan posisi geografis di HTML5!

 Navigator.geolocation.getCurrentPoSotion (function (pos) {console.log ('' akuisisi data lokasi berhasil '); // pos.coords.longtitude ....} (err) {console.log (' "akuisisi data penentuan posisi gagal ');

Seperti yang saya sebutkan dalam kata pengantar, penggunaan peta Baidu dalam proyek dan banyak aplikasi seluler menyediakan pengguna untuk memilih informasi penentuan posisi.

Pertama -tama, kita harus tahu bahwa kode sumber peta Baidu tidak akan diunduh untuk semua orang. Perusahaan yang sangat hati nurani.

Gunakan Langkah:

Pertama buka situs web resmi http://lbsyun.baidu.com/, lalu tarik ke bawah:

Dapat dilihat bahwa peta Baidu dapat digunakan untuk pengembangan web, pengembangan android, pengembangan iOS di sini kami menggunakan pengembangan web dan klik JavaScript API

URL: http://lbsyun.baidu.com/index.php?

Kami dapat pergi ke banyak kasus dan tampilan fungsi di API.

Saya akan menjelaskan apa kunci itu nanti. Masukkan ponsel terkait, kotak surat, dan kemudian verifikasi di kotak surat.

Isi nama aplikasi sesuka hati

Pilihan Jenis Aplikasi --- Browser Nide

Daftar Referensi: Mengacu pada siapa yang dapat mengakses aplikasi Anda, bagaimana Anda dapat mengakses aplikasi Anda tentang cara mengaksesnya, dan mengisi nomor bintang ' *' di sini, yang berarti bahwa semua orang dapat mengaksesnya, karena hanya pengujian yang dapat dilakukan, Dan proyek dapat dilakukan di masa depan. Persimpangan Kemudian klik kirim untuk menyelesaikan kreasi! Persimpangan

Setelah pembuatan aplikasi, antarmuka berikut muncul:

Di sini akan menampilkan nomor aplikasi, nama aplikasi, dan kode aplikasi akses paling penting yang dibuat di sini, yang merupakan kunci yang disebutkan sebelumnya!

Setelah mendapatkan kunci, kami kembali ke beranda http://lbsyun.baidu.com/index.php?title=jspopular

Klik Panduan Pengembangan di sebelah kiri, Anda dapat melihat penggunaan API dan kasus terkait! Persimpangan API ini adalah nurani paling dalam API, tidak ada omong kosong,

Tulisannya sangat detail dan mudah dimengerti, karena ada terlalu banyak, hanya memperkenalkan beberapa penggunaan utama di sini! Persimpangan Persimpangan

Kami membuat file HTML baru dan menyalin kode di atas ke file HTML

 <! = JRBP IU6JCBPSXGVDQXAC0C. Versi sebelumnya, dan metode referensi sebelumnya: src = http://api.map.baidu.com/api? ; Contoh peta untuk menghindari berat badan dengan nama peta, jadi gunakan bmap.map var peta = bmap.map baru (wadah); Koordinat titik tengah dan level peta 1 ~ ~ level 18.centerandzoom (titik, 18); Peta. Body> </html>

Gunakan Baidu Map:

Oke, kami berhasil menggunakan peta Baidu dalam file html. Sekarang kami dapat menggunakan peta Baidu seperti http://map.baidu.com! Persimpangan

Deskripsi Fungsi Terkait:

 <Script src = http://api.map.baidu.com/api?

Masukkan kunci trunk panjang di AK untuk mengutip peta Baidu! Persimpangan

Buat peta instance-harus dipilih.

var peta = bmap.map baru (wadah);

Buat poin tertentu, informasi lintang dan bujur Anda! Persimpangan Jika Anda tidak tahu, Anda dapat menggunakan yang sebelumnya

Navigator.geology.getCurrentPosotion Metode untuk mendapatkan garis lintang dan bujur harus dipilih.

var point = bmap.point baru (116.300982,39.915907);

Tampilkan nomor peta di titik terpusat sebagai pusat, 17 mengacu pada level, dan level dapat dibagi menjadi level 1 hingga 18. Semakin kecil level level, semakin besar kisaran peta, dan semakin besar level dari levelnya. Persimpangan --- harus dipilih.

Map.Centerandzoom (titik, 17);

Peta dapat dipilih dengan opsi mouse.

peta.enablesCrollwheelzoom (true);

Peta menunjukkan kontrol-efek diuji dengan sendirinya.

 Map.AddControl (BMAP.NAVIGATIONCTROL ()) baru;

Tampilkan label di peta (label) -Opsional

var marker = map.addoverlay (bmap.marker baru (titik));

OK, peta Baidu -ketiga dikatakan di sini, ada banyak fungsi menyenangkan yang dapat digunakan sendiri, sehingga metode dan parameter dapat ditemukan di API!

Di atas adalah semua isi artikel ini.