Pemetaan dengan PHP Geocoder dan Leaflet.js
Bahagian paling sukar, bagaimanapun, menukarkan data itu ke dalam koordinat yang dapat difahami oleh peta. Nasib baik, Geocoder PHP membolehkan kami menyambung ke penyedia geo-pengekodan yang berbeza. Digabungkan dengan leaflet.js, perpustakaan JavaScript yang mudah, membuat peta adalah angin.
Takeaways Key
- Geocoder PHP dan leaflet.js boleh digabungkan dengan berkesan untuk membuat peta interaktif dalam aplikasi web, menukar data ke dalam koordinat bahawa peta dapat difahami dengan mudah.
- Perpustakaan Geocoder membolehkan sambungan ke penyedia geo-pengekodan yang berbeza dan keupayaan untuk menghidupkan penyesuai anda jika keperluan anda berubah, tanpa perlu menulis semula bagaimana aplikasi anda menerima data.
- leaflet.js adalah perpustakaan JavaScript yang kuat yang menjadikan pemetaan mudah dengan mengendalikan lapisan interaksi peta, termasuk membuat penanda individu dan memformat pelbagai data dengan cara risalah yang diharapkan.
- Penampilan dan interaktiviti peta boleh disesuaikan dengan menggunakan pelbagai pilihan dan fungsi JS risalah, dan data untuk ciri -ciri ini dapat diambil dari pangkalan data menggunakan PHP dan kemudian dihantar ke fungsi JS risalah.
- bermula
dengan komposer, termasuk perpustakaan php geocoder adalah mudah:
mari juga tambahkan beberapa HTML ke fail index.php mudah untuk memasukkan bootstrap supaya kami mempunyai persekitaran yang bagus untuk memaparkan peta kami di:
{
"require": {
"willdurand/geocoder": "*"
}
}Menyediakan Geocoder
<?php
require 'vendor/autoload.php';
?>
<!DOCTYPE html>
<html>
<head>
<title>A simple map with Geocoder PHP and Leaflet.js</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
</head>
<body>
<div >
<div >
<div >
<h1 >A simple map with Geocoder PHP and Leaflet.js</h1>
</div>
<div >
<div >
</div>
</div>
</div><!-- /row -->
</div> <!-- /container -->
<script></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
</body>
</html>Geocoder bil sendiri sebagai Perpustakaan Geocoder yang hilang untuk PHP. Ia boleh digunakan dalam tiga langkah mudah:
Daftar penyesuai
- Daftar pembekal
- Geocode!
- Daftar penyesuai
Penyesuai berfungsi sebagai mekanisme untuk menyambung dan mendapatkan data ke pembekal pilihan anda melalui API mereka. Sesetengah penyesuai menggunakan fungsi terbina dalam dalam Php 5.3, seperti curl dan soket. Lain-lain, seperti klien Buzz, Guzzle, dan Zend HTTP, menggunakan perpustakaan sumber terbuka pihak ketiga yang hanya memerlukan anda untuk menambah kebergantungan mereka ke fail komposer anda.
Keindahan Perpustakaan Geocoder adalah abstraksi langkah penyesuai ini. Ia membolehkan anda menukar penyesuai anda jika keperluan anda berubah tanpa memerlukan anda menulis semula bagaimana aplikasi anda menerima data.
Untuk contoh ini, kami akan menggunakan curl dan kelas curlhttpadapter yang disertakan di dalam perpustakaan php geocoder.
Dalam fail index.php kami, mari tambahkan penyesuai:
Daftar pembekal
// Setup geocoder adapter. $adapter = new \Geocoder\HttpAdapter\CurlHttpAdapter();
Terdapat banyak penyedia geokod yang disokong oleh kotak perpustakaan Geocoder PHP, termasuk Peta Google, Peta Bing, Nominatim melalui OpenStreetMap, dan TomTom.
Senarai penuh boleh didapati di readme repositori Geocoder PHP.
Setiap pembekal, seperti yang diwakili oleh kelas masing -masing, mempunyai pilihan tersendiri. Bergantung pada keperluan anda, anda boleh mendaftarkan beberapa penyedia untuk pelbagai keadaan. Ini mungkin berguna jika aplikasi anda perlu memetakan jalan -jalan tertentu di San Jose, Costa Rica menggunakan OpenStreetMap dan mencari laluan cepat di Beijing, China menggunakan Baidu.
3Geocode
{
"require": {
"willdurand/geocoder": "*"
}
}kini boleh lulus alamat ke kaedah geocode () di dalam objek geocoder $ yang baru diteruskan. Ini akan mengembalikan objek hasil yang diterapkan melalui penyedia yang dipilih sebelum ini. Objek hasil ini mempunyai kaedah getLitud () dan getLongitude () yang boleh kita gunakan.
Mengintegrasikan dengan leaflet.js
<?php
require 'vendor/autoload.php';
?>
<!DOCTYPE html>
<html>
<head>
<title>A simple map with Geocoder PHP and Leaflet.js</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
</head>
<body>
<div >
<div >
<div >
<h1 >A simple map with Geocoder PHP and Leaflet.js</h1>
</div>
<div >
<div >
</div>
</div>
</div><!-- /row -->
</div> <!-- /container -->
<script src="https://img.php.cn/ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
</body>
</html>leaflet.js adalah perpustakaan JavaScript yang kuat yang menjadikan pemetaan sangat mudah.
Peta terdiri daripada tiga bahagian:
jubin
- Lapisan interaksi (biasanya melalui JavaScript dan CSS)
- titik data
- Jubin adalah 256 oleh 256 piksel dataran yang menunjukkan perincian peta. Perkhidmatan seperti Mapbox dan CloudMade membolehkan anda membuat tileset anda sendiri. Untuk contoh ini, saya telah membuat akaun percuma dengan Cloudemade dan akan menggunakan kunci API yang diberikan untuk menunjukkan jubin dari perkhidmatan hosting mereka.
Lapisan interaksi dikendalikan oleh leaflet.js. Saya hanya menyertakan Perpustakaan JavaScript dan CSS Risalah ke dalam templat HTML starter kami:
titik data telah dibuat lebih awal dengan kod geokoder saya. Saya hanya perlu memformat pelbagai data dengan cara risalah yang diharapkan.
// Setup geocoder adapter. $adapter = new \Geocoder\HttpAdapter\CurlHttpAdapter();
Dalam contoh mudah ini, saya hanya akan membuat penanda individu sebagai pembolehubah JavaScript yang akan dimasukkan ke dalam peta saya melalui rentetan yang dihasilkan oleh PHP.
Risalah mempunyai pilihan untuk data ini juga akan diluluskan melalui format geojson untuk dataset yang lebih besar dan lebih dinamik.
Kerana risalah menyuntik kod peta ke dalam elemen DOM yang sedia ada, kita perlu menentukan elemen tersebut di dalam HTML kami. Kita boleh melakukan ini dengan hanya membuat div dengan ID yang unik:
// Create a chain of providers.
// Be sure to include my previously created adapter.
$chain = new \Geocoder\Provider\ChainProvider(
array(
new \Geocoder\Provider\GoogleMapsProvider($adapter),
)
);
// Instantiate the geocoder.
$geocoder = new \Geocoder\Geocoder();
// Register my providers.
$geocoder->registerProvider($chain);
kita kemudian dapat menargetkan id itu dalam risalah dengan memanggil kaedah JavaScript Peta () JavaScript dan lulus dalam ID kami di Footer:
Sekarang, kami membina tiga bahagian peta kami. Untuk mendaftarkan jubin, kami hanya memanggil kaedah TileLayer () terbina dalam, menentukan atribut dan tahap zum jika dikehendaki, kemudian memajukan kaedah addTo ():
// Demo locations
$locations = array(
array(
'address' => '3324 N California Ave, Chicago, IL, 60618',
'title' => 'Hot Dougs',
),
array(
'address' => '11 S White, Frankfort, IL, 60423',
'title' => 'Museum',
),
array(
'address' => '1000 Sterling Ave, , Flossmoor, IL, 60422',
'title' => 'Library',
),
array(
'address' => '2053 Ridge Rd, Homewood, IL, 60430',
'title' => 'Twisted Q',
)
);
foreach ($locations as $key => $value) {
// Try to geocode.
try {
$geocode = $geocoder->geocode($value['address']);
$longitude = $geocode->getLongitude();
$latitude = $geocode->getLatitude();
} catch (Exception $e) {
echo $e->getMessage();
}
}Akhirnya, kami mencetak data peta kami menggunakan array PHP yang kami tentukan sebelum ini, dan pastikan peta itu memusatkan diri pada titik data tersebut dengan mendefinisikannya bersama sebagai kumpulan. Semua dalam semua, JavaScript di footer akan menjadi:
<link rel="stylesheet" href="//cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" /> <script src="//cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
Jika anda mendapat sejauh ini, anda akan melihat bahawa tiada apa yang berlaku.
$mapdata = $marker_group = array();
foreach ($locations as $key => $value) {
// Try to geocode.
try {
$geocode = $geocoder->geocode($value['address']);
$longitude = $geocode->getLongitude();
$latitude = $geocode->getLatitude();
// Create map data array
$mapdata[] = markerCreator($latitude, $longitude, $value['title'], $key);
// Marker grouping array
$marker_group[] = "marker{$key}";
} catch (Exception $e) {
echo $e->getMessage();
}
}
function markerCreator($lat, $long, $label, $key) {
return "var marker{$key} = L.marker([{$lat}, {$long}]).addTo(map);
marker{$key}.bindPopup(\"{$label}\");";
}Ini kerana risalah tidak menyuntik sifat pada ketinggian atau lebar div peta, yang membolehkan anda menggayakannya dan mengubah saiznya seperti yang anda suka. Cukup berikan div anda ketinggian dan lebar, dan peta anda sepatutnya muncul!
Kesimpulan
Anda boleh membuat peta yang indah dan interaktif dengan perpustakaan php geocoder dan leaflet.js. Pastikan anda menyemak dokumentasi masing -masing projek kerana terdapat banyak penyesuaian yang lebih maju yang mungkin.
lihat demo untuk artikel ini atau garpu di GitHub.
Soalan Lazim (Soalan Lazim) Mengenai Pemetaan dengan Geocoder PHP dan Leaflet JS
Bagaimana saya boleh mengintegrasikan risalah JS dengan php?
Mengintegrasikan risalah JS dengan PHP melibatkan beberapa langkah. Pertama, anda perlu memasukkan Perpustakaan JS Leaflet dalam fail PHP anda. Ini boleh dilakukan dengan memuat turun perpustakaan dan menghubungkannya dalam fail PHP anda atau dengan menggunakan CDN. Sebaik sahaja perpustakaan dimasukkan, anda boleh memulakan peta menggunakan fungsi l.map (). Anda kemudian boleh menambah lapisan, penanda, dan ciri -ciri lain ke peta menggunakan pelbagai fungsi JS risalah. Data untuk ciri -ciri ini boleh diambil dari pangkalan data menggunakan PHP dan kemudian diserahkan kepada fungsi JS risalah. daripada menukar alamat ke dalam koordinat geografi, yang boleh anda gunakan untuk meletakkan penanda pada peta, atau meletakkan peta. Dalam risalah JS, anda boleh menggunakan perkhidmatan geokod seperti API Nominatim atau Google Geocoding untuk menukar alamat ke dalam koordinat. Sebaik sahaja anda mempunyai koordinat, anda boleh menggunakan fungsi l.marker () untuk meletakkan penanda pada peta pada koordinat yang ditentukan. 🎜>
php boleh digunakan untuk mengambil data dari pangkalan data dengan menggunakan fungsi terbina dalam untuk interaksi pangkalan data. Sebagai contoh, jika anda menggunakan pangkalan data MySQL, anda boleh menggunakan fungsi mysqli_connect () untuk menyambung ke pangkalan data, dan kemudian gunakan fungsi mysqli_query () untuk melaksanakan pertanyaan dan mengambil data SQL. Data yang diambil kemudiannya boleh dihantar ke fungsi JS risalah untuk menambah ciri ke peta.Bagaimana saya boleh menambah ciri interaktif ke peta saya? ke peta anda. Sebagai contoh, anda boleh menggunakan fungsi l.popup () untuk menambah popup ke peta anda, yang boleh memaparkan maklumat tambahan apabila penanda atau ciri lain diklik. Anda juga boleh menggunakan fungsi L.Control.Layers () untuk menambah kawalan lapisan, yang membolehkan pengguna menukar antara lapisan asas dan lapisan lapisan yang berbeza.
Bagaimana saya boleh menyesuaikan penampilan peta saya?
Penampilan peta anda boleh disesuaikan dengan menggunakan pelbagai pilihan dan fungsi JS risalah. Sebagai contoh, anda boleh menggunakan fungsi setView () untuk menetapkan pusat geografi awal dan tahap zum peta. Anda juga boleh menggunakan fungsi L.TileLayer () untuk menambah lapisan jubin ke peta, yang menentukan penampilan visual lapisan asas peta. Parameter pilihan fungsi l.map () boleh digunakan untuk menetapkan pelbagai pilihan lain, seperti tahap zum maksimum peta, sama ada untuk memaparkan kawalan atribusi, dan sebagainya. Menggunakan perkhidmatan geocoding?
Apabila menggunakan perkhidmatan geokod, kesilapan boleh berlaku untuk pelbagai sebab, seperti isu rangkaian, input tidak sah, atau melebihi had penggunaan perkhidmatan. Kesalahan ini boleh dikendalikan dengan menggunakan teknik pengendalian ralat yang disediakan oleh bahasa pengaturcaraan yang anda gunakan. Contohnya, dalam PHP, anda boleh menggunakan pernyataan percubaan untuk menangkap pengecualian dan mengendalikannya dengan sewajarnya. prestasi peta anda. Salah satu cara ialah menggunakan lapisan jubin yang dioptimumkan untuk prestasi, seperti lapisan jubin vektor. Cara lain adalah untuk mengehadkan bilangan ciri yang dipaparkan pada peta sekaligus, contohnya dengan menggunakan clustering atau hanya memaparkan ciri -ciri dalam paparan peta semasa. Anda juga boleh mengoptimumkan prestasi kod PHP anda dengan menggunakan pertanyaan pangkalan data yang cekap dan dengan hasil caching apabila sesuai. Memaparkan dengan betul pada saiz dan peranti skrin yang berbeza. Ini boleh dicapai dengan menggunakan pertanyaan media CSS untuk menyesuaikan saiz dan susun atur bekas peta berdasarkan saiz skrin. Anda juga boleh menggunakan Fungsi JS Risalah.Invalidatesize () untuk mengemas kini saiz dan kedudukan peta apabila saiz perubahan kontenanya. Penanda tersuai boleh ditambah ke peta anda dengan menggunakan fungsi l.icon (). Fungsi ini membolehkan anda menentukan imej tersuai untuk digunakan sebagai ikon penanda. Anda juga boleh menentukan saiz, titik utama, dan sifat lain ikon. Ikon tersuai kemudiannya boleh digunakan apabila membuat penanda dengan menyampaikannya sebagai pilihan kepada fungsi l.marker ().
Bagaimana saya boleh menggunakan risalah JS untuk memaparkan data dari fail geojson?
Leaflet JS menyediakan fungsi l.geojson (), yang boleh digunakan untuk memaparkan data dari fail geojson pada peta anda. Fungsi ini mengambil objek Geojson sebagai input dan mewujudkan lapisan yang mengandungi ciri -ciri yang diterangkan oleh data geojson. Ciri -ciri ini boleh digayakan dan berinteraksi dengan menggunakan pelbagai pilihan dan kaedah yang disediakan oleh fungsi l.geojson (). Data geojson boleh diambil dari fail atau pelayan menggunakan php atau javascript.
Atas ialah kandungan terperinci Pemetaan dengan PHP Geocoder dan Leaflet.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1664
14
1423
52
1317
25
1268
29
1243
24
Demystifying JavaScript: Apa yang berlaku dan mengapa penting
Apr 09, 2025 am 12:07 AM
JavaScript adalah asas kepada pembangunan web moden, dan fungsi utamanya termasuk pengaturcaraan yang didorong oleh peristiwa, penjanaan kandungan dinamik dan pengaturcaraan tak segerak. 1) Pengaturcaraan yang didorong oleh peristiwa membolehkan laman web berubah secara dinamik mengikut operasi pengguna. 2) Penjanaan kandungan dinamik membolehkan kandungan halaman diselaraskan mengikut syarat. 3) Pengaturcaraan Asynchronous memastikan bahawa antara muka pengguna tidak disekat. JavaScript digunakan secara meluas dalam interaksi web, aplikasi satu halaman dan pembangunan sisi pelayan, sangat meningkatkan fleksibiliti pengalaman pengguna dan pembangunan silang platform.
Evolusi JavaScript: Trend Semasa dan Prospek Masa Depan
Apr 10, 2025 am 09:33 AM
Trend terkini dalam JavaScript termasuk kebangkitan TypeScript, populariti kerangka dan perpustakaan moden, dan penerapan webassembly. Prospek masa depan meliputi sistem jenis yang lebih berkuasa, pembangunan JavaScript, pengembangan kecerdasan buatan dan pembelajaran mesin, dan potensi pengkomputeran IoT dan kelebihan.
Enjin JavaScript: Membandingkan Pelaksanaan
Apr 13, 2025 am 12:05 AM
Enjin JavaScript yang berbeza mempunyai kesan yang berbeza apabila menguraikan dan melaksanakan kod JavaScript, kerana prinsip pelaksanaan dan strategi pengoptimuman setiap enjin berbeza. 1. Analisis leksikal: Menukar kod sumber ke dalam unit leksikal. 2. Analisis Tatabahasa: Menjana pokok sintaks abstrak. 3. Pengoptimuman dan Penyusunan: Menjana kod mesin melalui pengkompil JIT. 4. Jalankan: Jalankan kod mesin. Enjin V8 mengoptimumkan melalui kompilasi segera dan kelas tersembunyi, Spidermonkey menggunakan sistem kesimpulan jenis, menghasilkan prestasi prestasi yang berbeza pada kod yang sama.
Python vs JavaScript: Keluk Pembelajaran dan Kemudahan Penggunaan
Apr 16, 2025 am 12:12 AM
Python lebih sesuai untuk pemula, dengan lengkung pembelajaran yang lancar dan sintaks ringkas; JavaScript sesuai untuk pembangunan front-end, dengan lengkung pembelajaran yang curam dan sintaks yang fleksibel. 1. Sintaks Python adalah intuitif dan sesuai untuk sains data dan pembangunan back-end. 2. JavaScript adalah fleksibel dan digunakan secara meluas dalam pengaturcaraan depan dan pelayan.
JavaScript: meneroka serba boleh bahasa web
Apr 11, 2025 am 12:01 AM
JavaScript adalah bahasa utama pembangunan web moden dan digunakan secara meluas untuk kepelbagaian dan fleksibiliti. 1) Pembangunan front-end: Membina laman web dinamik dan aplikasi satu halaman melalui operasi DOM dan kerangka moden (seperti React, Vue.js, sudut). 2) Pembangunan sisi pelayan: Node.js menggunakan model I/O yang tidak menyekat untuk mengendalikan aplikasi konkurensi tinggi dan masa nyata. 3) Pembangunan aplikasi mudah alih dan desktop: Pembangunan silang platform direalisasikan melalui reaktnatif dan elektron untuk meningkatkan kecekapan pembangunan.
Cara Membina Aplikasi SaaS Multi-Tenant dengan Next.js (Integrasi Frontend)
Apr 11, 2025 am 08:22 AM
Artikel ini menunjukkan integrasi frontend dengan backend yang dijamin oleh permit, membina aplikasi edtech SaaS yang berfungsi menggunakan Next.Js. Frontend mengambil kebenaran pengguna untuk mengawal penglihatan UI dan memastikan permintaan API mematuhi dasar peranan
Membina aplikasi SaaS Multi-penyewa dengan Next.js (Integrasi Backend)
Apr 11, 2025 am 08:23 AM
Saya membina aplikasi SaaS multi-penyewa berfungsi (aplikasi edTech) dengan alat teknologi harian anda dan anda boleh melakukan perkara yang sama. Pertama, apakah aplikasi SaaS multi-penyewa? Aplikasi SaaS Multi-penyewa membolehkan anda melayani beberapa pelanggan dari Sing
Dari C/C ke JavaScript: Bagaimana semuanya berfungsi
Apr 14, 2025 am 12:05 AM
Peralihan dari C/C ke JavaScript memerlukan menyesuaikan diri dengan menaip dinamik, pengumpulan sampah dan pengaturcaraan asynchronous. 1) C/C adalah bahasa yang ditaip secara statik yang memerlukan pengurusan memori manual, manakala JavaScript ditaip secara dinamik dan pengumpulan sampah diproses secara automatik. 2) C/C perlu dikumpulkan ke dalam kod mesin, manakala JavaScript adalah bahasa yang ditafsirkan. 3) JavaScript memperkenalkan konsep seperti penutupan, rantaian prototaip dan janji, yang meningkatkan keupayaan pengaturcaraan fleksibiliti dan asynchronous.
