Menggunakan API Peta Google untuk melaksanakan fungsi peta dalam Beego

Beego ialah rangka kerja web berdasarkan bahasa Go Ia memberikan banyak kemudahan dan pengoptimuman, menjadikan pembangunan aplikasi web lebih cekap dan kurang terdedah kepada ralat. Antaranya, Beego turut menyokong penyepaduan perkhidmatan pihak ketiga, seperti API Peta Google, untuk melaksanakan fungsi peta biasa dalam aplikasi web.

API Peta Google ialah antara muka API yang menyediakan perkhidmatan peta dan kedudukan serta digunakan secara meluas dalam pembangunan aplikasi web. Dengan memperkenalkan perpustakaan API Peta Google ke dalam aplikasi Beego, kami boleh dengan mudah melaksanakan paparan peta, anotasi lokasi, perancangan laluan dan fungsi lain dalam aplikasi web.

Di bawah, arahan langkah demi langkah terperinci disediakan supaya pembangun boleh menggunakan API Peta Google untuk melaksanakan fungsi peta.

Langkah 1: Mohon kunci API Peta Google

Apabila memulakan proses pembangunan menggunakan API Peta Google, anda perlu memohon akaun pembangun untuk mendapatkan kunci API. Langkah khusus adalah seperti berikut:

1. Log masuk ke Platform Pembangun Google (https://console.developers.google.com/).
2. Buat projek baharu dan dayakan API JavaScript Peta dalam projek.
3. Pilih "Buat Bukti Kelayakan" daripada menu "Kredential" untuk mencipta kunci API yang sepadan.
4. Dayakan API JavaScript Peta dalam APIkey.
5. Apabila mengakses API JavaScript Peta dengan kunci API, pastikan anda menghalakan permintaan ke domain yang betul (http://localhost:8080 dan http://yourdomain.com kedua-duanya perlu disenaraikan secara berasingan).

Simpan kunci API yang digunakan ini akan digunakan dalam pembangunan seterusnya.

Langkah 2: Perkenalkan perpustakaan API Peta Google

Langkah pertama untuk menggunakan API Peta Google dalam aplikasi Beego ialah memperkenalkan fail perpustakaannya. Kaedah khusus adalah seperti berikut:

1. Tambah folder statik dalam aplikasi Beego dan tambah folder js di dalamnya.
2. Buat fail js baharu dalam folder js untuk menyimpan API Peta Google, contohnya: google_maps_api.js.
3. Dalam fail google_maps_api.js, tambahkan kod berikut untuk memperkenalkan API Peta Google:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=[APIkey]&libraries=places"></script>

Perhatikan bahawa gantikan [APIkey] di atas dengan APIkey yang digunakan dalam yang pertama langkah.

Langkah 3: Bangunkan peta API Peta Google

Selepas memperkenalkan API Peta Google, anda boleh mula membangunkan peta API Peta Google dalam aplikasi Beego. Kaedah khusus adalah seperti berikut:

1. Tambah Pengawal baharu dalam aplikasi Beego dan namakannya MapController.
2. Tambah fungsi tindakan dalam MapController dan namakannya MapView.
3. Dalam fungsi MapView, tunjukkan halaman HTML yang mengandungi elemen div untuk memaparkan peta, contohnya:

func (c *MapController) MapView() {
   c.TplName = "map_view.tpl"
}

Nota: map_view.tpl ialah nama fail templat , akan disebut kemudian.

4. Tambah kod berikut dalam map_view.tpl untuk mencipta elemen peta:

<div id="google-map"></div>

5. Tambah kod JavaScript berikut dalam map_view.tpl untuk mencipta Peta Google Peta API:

<script>
   var map;
   function initMap() {
     map = new google.maps.Map(document.getElementById('google-map'), {
       center: {lat: 40.748817, lng: -73.985428},
       zoom: 15
     });
   }
   initMap();
</script>

Antaranya, pusat menentukan koordinat tengah peta dan zum menentukan tahap zum peta.

Pada ketika ini, anda telah berjaya mencipta peta menggunakan API Peta Google dan memaparkannya dalam aplikasi Beego.

Langkah 4: Tandai lokasi pada peta

Menanda lokasi pada peta ialah salah satu fungsi teras aplikasi peta. Melalui API Peta Google, anda boleh melaksanakan fungsi menandakan lokasi pada peta dengan mudah Kaedah khusus adalah seperti berikut:

1. Dalam MapView, tentukan objek Penanda yang digunakan untuk menandakan lokasi, contohnya: penanda.
2. Dalam kod JavaScript yang memulakan peta, tambahkan kod berikut untuk mencipta objek Penanda dan ikat pada peta:

var marker = new google.maps.Marker({
   position: {lat: 40.748817, lng: -73.985428},
   map: map,
   title: 'New York, NY',
   icon: 'https://maps.google.com/mapfiles/kml/shapes/parking_lot_maps.png'
});

Nota: Koordinat, ikon di atas code , dan tajuk perlu dikonfigurasikan mengikut keperluan sebenar.

Pada ketika ini, lokasi telah berjaya ditanda pada peta.

Langkah 5: Perancangan Laluan

Melalui API Peta Google, anda juga boleh merancang laluan terbaik antara dua titik pada peta. Proses pelaksanaan adalah seperti berikut:

1. Dalam MapView, tentukan dua objek Penanda yang digunakan untuk mengenal pasti titik permulaan dan titik akhir, contohnya: originMarker dan destinationMarker.
2. Tentukan objek DirectionsService untuk melukis laluan, contohnya: directionsService.
3. Dalam kod JavaScript yang memulakan peta, tambahkan kod berikut untuk menyediakan Penanda bagi titik asal dan akhir, dan ikatkannya pada peta:

var originMarker = new google.maps.Marker({
   position: {lat: 40.748817, lng: -73.985428},
   map: map,
   title: 'New York, NY'
});

var destinationMarker = new google.maps.Marker({
   position: {lat: 40.733002, lng: -73.989696},
   map: map,
   title: 'Brooklyn, NY'
});

4. Dalam MapView , tambahkan fungsi JavaScript untuk melukis laluan, contohnya: getDirections.
5. Dalam fungsi getDirections, tambah kod berikut untuk menyampaikan laluan:

var directionsService = new google.maps.DirectionsService();

var request = {
   origin: {lat: 40.748817, lng: -73.985428},
   destination: {lat: 40.733002, lng: -73.989696},
   travelMode: google.maps.TravelMode.DRIVING
};

directionsService.route(request, function(result, status) {
   if (status == 'OK') {
     var directionsDisplay = new google.maps.DirectionsRenderer();
     directionsDisplay.setMap(map);
     directionsDisplay.setDirections(result);
   }
});

Nota: Koordinat dalam kod di atas perlu dikonfigurasikan mengikut keperluan sebenar.

Pada ketika ini, perancangan laluan antara dua titik pada peta tercapai.

Ringkasan

Melalui langkah di atas, kami berjaya melaksanakan fungsi peta dalam aplikasi Beego menggunakan API Peta Google. Fungsi peta sangat biasa digunakan dalam pembangunan aplikasi web Kod contoh di sini boleh digunakan sebagai panduan pelaksanaan untuk fungsi ini untuk dirujuk oleh pembangun.

Atas ialah kandungan terperinci Menggunakan API Peta Google untuk melaksanakan fungsi peta dalam Beego. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!