Rumah > Artikel > hujung hadapan web > Cara menggunakan JS dan Amap untuk melaksanakan fungsi penentududukan lokasi

Cara menggunakan JS dan Amap untuk melaksanakan fungsi penentududukan lokasi

王林asal: 2023-11-21 12:16:001475semak imbas

1. Pengenalan
Dengan perkembangan Internet, fungsi penentududukan peta telah menjadi ciri yang mesti ada untuk banyak laman web dan aplikasi. Hari ini kami akan memperkenalkan cara menggunakan API JS dan Amap untuk melaksanakan fungsi kedudukan lokasi. Artikel ini akan menerangkan secara terperinci kerja penyediaan, mendapatkan kunci API Amap, mencipta peta, menambah penanda, menambah tetingkap maklumat dan mencari lokasi pengguna serta memberikan contoh kod yang berkaitan.

2. Persediaan
Sebelum bermula, kami perlu memastikan bahawa kami mempunyai persediaan berikut:

Akaun pembangun Amap yang sah, dan aplikasi telah dibuat.
Editor teks yang didayakan penyemak imbas seperti Teks Sublime atau Kod Visual Studio.
Pengetahuan asas HTML, CSS dan JavaScript.

3. Dapatkan kunci API Amap

Buka laman web rasmi AMAP Developer (https://lbs.amap.com/), log masuk atau daftar akaun.
Buat aplikasi baharu dan pilih jenis perkhidmatan Web.
Pada halaman butiran aplikasi, cari lajur "Kunci Pembangun" dan salin kunci API yang dijana.

4. Cipta peta

Dalam fail HTML yang anda perlu tambahkan peta, tambahkan kod berikut:

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>地点定位</title>
 <style type="text/css">
     #map{
         width: 800px;
         height: 500px;
     }
 </style>
</head>
<body>
 <div id="map"></div>
</body>
</html>

Dalam fail JavaScript anda, tambahkan kod berikut (memperkenalkan API Amap) :

<script src="https://webapi.amap.com/maps?v=1.4.15&key=你的API密钥"></script>

Dalam fail JavaScript, tambahkan kod berikut (buat peta):
```
var map = new AMap.Map('map',{
 center: [经度, 纬度],
 zoom: 缩放级别
});
```
di mana [longitud, latitud] mewakili titik tengah peta dan tahap zum menentukan tahap paparan peta.

5. Tambah tanda

Dalam fail JavaScript, tambah kod berikut (buat tanda):
```
var marker = new AMap.Marker({
 position: [经度, 纬度]
});
marker.setMap(map);
```
Antaranya, [longitud, latitud] mewakili lokasi tanda.

6. Tambah tetingkap maklumat

Dalam fail JavaScript, tambah kod berikut (buat tetingkap maklumat):

var infoWindow = new AMap.InfoWindow({
 content: '这里是信息窗口的内容'
});

Sekiranya perlu mencetuskan tetingkap maklumat, tambah kod berikut:

marker.on('click', function(){
 infoWindow.open(map, marker.getPosition());
});

7. Cari lokasi pengguna

Dalam fail JavaScript, tambah kod berikut (cari lokasi pengguna):

AMap.plugin('AMap.Geolocation', function() {
 var geolocation = new AMap.Geolocation({
     enableHighAccuracy: true, // 是否使用高精度定位，默认为false
     timeout: 10000, // 超过10秒后停止定位，默认为无穷大
     maximumAge: 0, // 定位结果缓存0毫秒，默认值为0
     convert: true, // 自动偏移坐标是否转换，默认为true
     showButton: true, // 显示定位按钮，默认为true
     buttonPosition: 'LB', // 定位按钮停靠位置，默认为'LB'，左下角
     buttonOffset: new AMap.Pixel(10, 20), // 定位按钮的偏移量，默认为Pixel(10, 20)
     showMarker: true, // 定位成功后在定位到的位置显示点标记，默认为true
     showCircle: true, // 定位成功后用圆圈表示定位精度范围，默认为true
     panToLocation: true, // 定位成功后将定位到的位置作为地图中心点，默认为true
     zoomToAccuracy:true // 定位成功后将定位精度范围显示在地图上，默认为true
 });
 map.addControl(geolocation);
 geolocation.getCurrentPosition();
 AMap.event.addListener(geolocation, 'complete', onComplete);
 AMap.event.addListener(geolocation, 'error', onError);
});
function onComplete(data) {
 var lnglat = data.position;
 var marker = new AMap.Marker({
     position: lnglat
 });
 marker.setMap(map);
}
function onError(error) {
 console.log('定位失败');
}

8. Ringkasan
Melalui pengenalan artikel ini, kami telah mempelajari cara menggunakan artikel ini. JS dan API Amap untuk melaksanakan fungsi Penentududukan lokasi. Kami belajar tentang kerja penyediaan, mendapatkan kunci API Amap, mencipta peta, menambah penanda, menambah tetingkap maklumat dan mencari lokasi pengguna dan menyediakan contoh kod yang sepadan. Saya percaya pembaca boleh melaksanakan fungsi penentududukan lokasi dengan mudah berdasarkan kandungan yang disediakan dalam artikel ini. Saya harap artikel ini berguna kepada anda, terima kasih kerana membaca!

Atas ialah kandungan terperinci Cara menggunakan JS dan Amap untuk melaksanakan fungsi penentududukan lokasi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript css html JS 事件 visual studio visual studio code sublime text https

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Cara menggunakan Peta JS dan Baidu untuk menambah penanda lokasi tersuai pada petaArtikel seterusnya：Cara menggunakan Peta JS dan Baidu untuk menambah penanda lokasi tersuai pada peta

Artikel berkaitan

Lihat lagi