Cara menggunakan JS dan Amap untuk melaksanakan fungsi penentududukan lokasi-tutorial js-php.cn

Cara menggunakan JS dan Amap untuk melaksanakan fungsi penentududukan lokasi

王林

Lepaskan： 2023-11-21 12:16:00

asal

1531 orang telah melayarinya

Cara menggunakan JS dan Amap untuk melaksanakan fungsi penentududukan lokasi

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>

Salin selepas log masuk

Dalam fail JavaScript anda, tambahkan kod berikut (memperkenalkan API Amap) :
```
<script src="https://webapi.amap.com/maps?v=1.4.15&key=你的API密钥"></script>
```
Salin selepas log masuk
Dalam fail JavaScript, tambahkan kod berikut (buat peta):
```
var map = new AMap.Map('map',{
 center: [经度, 纬度],
 zoom: 缩放级别
});
```
Salin selepas log masuk
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);
```
Salin selepas log masuk
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: '这里是信息窗口的内容'
});
```
Salin selepas log masuk
Sekiranya perlu mencetuskan tetingkap maklumat, tambah kod berikut:
```
marker.on('click', function(){
 infoWindow.open(map, marker.getPosition());
});
```
Salin selepas log masuk

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('定位失败');
}

Salin selepas log masuk

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!