Rumah > Artikel > hujung hadapan web > Bagaimana untuk menggunakan jquery untuk melaksanakan kedudukan peta
Bagaimana untuk menggunakan jquery untuk melaksanakan kedudukan peta
- PHPzasal
- 2023-04-17 15:21:23996semak imbas
Dengan populariti Internet mudah alih, penentududukan peta telah menjadi perkhidmatan yang semakin popular dan fungsi asas bagi banyak aplikasi dalam talian dan mudah alih. Sebagai perpustakaan JavaScript yang biasa digunakan, jquery juga menyediakan API penentududukan peta yang kaya Mari kita perkenalkan cara menggunakan jquery untuk melaksanakan penentududukan peta.
1. Pengenalan perpustakaan jquery dan API peta
Sebelum menggunakan jquery untuk penentududukan peta, kita perlu memperkenalkan perpustakaan jquery dan API peta ke dalam halaman. Dalam keadaan biasa, kami boleh mengimportnya terus dari Internet:
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
Dalam kod di atas, kami memperkenalkan perpustakaan jquery dan API Amap, dan menggunakan nilai utama yang digunakan oleh kami sendiri untuk mengesahkan identiti .
2. Buat bekas peta
Buat bekas untuk memaparkan peta pada halaman, yang boleh menjadi div, kanvas dan teg lain, contohnya:
<div id="mapContainer" style="width: 100%; height: 300px;"></div>
Kod di atas, kami mencipta teg div dengan id "mapContainer" untuk memaparkan peta dan menetapkan lebar dan tinggi.
3. Mulakan peta
Selepas menyelesaikan penciptaan bekas peta, kita perlu menggunakan jquery untuk memulakan peta adalah seperti berikut:
var map = new AMap.Map("mapContainer", {
resizeEnable: true,
zoom: 10, //设置地图缩放级别
center: [116.397428, 39.90923] //设置地图中心点坐标
});
Dalam kod di atas, kami menggunakan fungsi AMap.Map() memulakan peta dan melaksanakan beberapa konfigurasi, seperti menetapkan tahap zum, koordinat titik tengah, dsb.
4 Dapatkan lokasi semasa melalui penyemak imbas
Selepas melengkapkan pemulaan peta, kami perlu mendapatkan maklumat lokasi peranti semasa, yang boleh dicapai melalui API yang disediakan oleh pelayar. Kodnya adalah seperti berikut:
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
var longitude = position.coords.longitude; //获取经度
var latitude = position.coords.latitude; //获取纬度
var accuracy = position.coords.accuracy; //获取精度
map.setZoomAndCenter(18, [longitude, latitude]); //设置地图缩放级别和中心坐标
var marker = new AMap.Marker({
position: [longitude, latitude], //设置标记的坐标
map: map //设置标记所属的地图对象
});
},function (error) {
switch (error.code) {
case 1:
console.log("位置服务被拒绝");
break;
case 2:
console.log("暂时获取不到位置信息");
break;
case 3:
console.log("获取信息超时");
break;
case 4:
console.log("未知错误");
break;
}
});
}
Dalam kod di atas, kami menentukan sama ada penyemak imbas menyokong mendapatkan maklumat lokasi geografi. Jika disokong, kami menggunakan fungsi getCurrentPosition() untuk mendapatkan longitud, latitud dan ketepatan lokasi semasa dan menetapkan koordinat tengah dan penanda peta melalui fungsi setZoomAndCenter() dan fungsi AMap.Marker().
5. Kod lengkap untuk kedudukan peta
Berikut ialah kod lengkap untuk jquery untuk melaksanakan kedudukan peta:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery实现地图定位</title>
<style type="text/css">
#mapContainer{
width: 100%;
height: 300px;
}
</style>
</head>
<body>
<div id="mapContainer"></div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
<script>
$(function () {
//初始化地图
var map = new AMap.Map("mapContainer", {
resizeEnable: true,
zoom: 10,
center: [116.397428, 39.90923]
});
//获取当前位置
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
var longitude = position.coords.longitude; //获取经度
var latitude = position.coords.latitude; //获取纬度
var accuracy = position.coords.accuracy; //获取精度
map.setZoomAndCenter(18, [longitude, latitude]); //设置地图缩放级别和中心坐标
var marker = new AMap.Marker({
position: [longitude, latitude],
map: map
});
},function (error) {
switch (error.code) {
case 1:
console.log("位置服务被拒绝");
break;
case 2:
console.log("暂时获取不到位置信息");
break;
case 3:
console.log("获取信息超时");
break;
case 4:
console.log("未知错误");
break;
}
});
}
});
</script>
</body>
</html>
6 >Artikel ini memperkenalkan Cara menggunakan jquery untuk melaksanakan kaedah dan kod kedudukan peta, saya harap ia akan membantu semua orang dalam kajian atau kerja anda. Sudah tentu, API penentududukan peta yang disediakan oleh jquery jauh lebih banyak daripada ini. Ia mempunyai lebih banyak fungsi dan lebih kaya Anda boleh mengetahui lebih lanjut mengenainya dengan melihat dokumentasi jquery rasmi.
Atas ialah kandungan terperinci Bagaimana untuk menggunakan jquery untuk melaksanakan kedudukan peta. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!