Induk geolokasi dan paparan peta dalam JavaScript

Untuk menguasai geolokasi dan paparan peta dalam JavaScript, contoh kod khusus diperlukan

Geolokasi dan paparan peta ialah salah satu fungsi biasa dan penting dalam aplikasi Internet hari ini. Menggunakan fungsi geolokasi JavaScript, kami boleh mendapatkan maklumat lokasi semasa pengguna, dan paparan peta boleh memaparkan maklumat lokasi dengan cara yang lebih intuitif.

1 Geolokasi
Dalam JavaScript, kami boleh mendapatkan maklumat lokasi semasa pengguna dengan menggunakan API geolokasi penyemak imbas. Berikut ialah contoh kod untuk mendapatkan lokasi semasa pengguna:

if (navigator.geolocation) {
     navigator.geolocation.getCurrentPosition(function(position) {
          var latitude = position.coords.latitude;   // 获取纬度
          var longitude = position.coords.longitude; // 获取经度
          // 在这里可以进行一些基于位置的操作，例如显示位置信息等
     });
} else {
     // 当浏览器不支持地理定位时的处理逻辑
}

Dengan memanggil fungsi navigator.geolocation.getCurrentPosition(), kami boleh mendapatkan maklumat lokasi semasa pengguna. position.coords.latitud dan position.coords.longitud masing-masing mewakili latitud dan longitud. navigator.geolocation.getCurrentPosition()函数，我们可以获取到用户的当前位置信息。position.coords.latitude和position.coords.longitude分别表示纬度和经度。

二、地图显示
在地图显示方面，最常用的就是利用Google Maps API来实现。下面是一个简单的示例：

首先，在网页中引入Google Maps API的脚本：

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>

然后，定义一个用于显示地图的容器元素，例如一个<div>元素：

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

接下来，我们编写JavaScript代码，创建一个地图并在其中标注用户的当前位置：

// 初始化地图
function initMap() {
     // 创建地图实例
     var map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -34, lng: 151},
          zoom: 8
     });

     // 获取用户位置
     if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(function(position) {
               var latitude = position.coords.latitude;   // 获取纬度
               var longitude = position.coords.longitude; // 获取经度

               // 在地图上标注用户位置
               var userLocation = new google.maps.LatLng(latitude, longitude);
               var marker = new google.maps.Marker({
                    position: userLocation,
                    map: map,
                    title: 'Your Location'
               });
          });
     }
}

在上述代码中，我们使用了Google Maps API来创建一个地图实例，并将其显示在<div id="map">中。然后，通过获取用户的位置信息，我们在地图上标注了用户的位置。<p>需要注意的是，我们需要在获取Google Maps API的密钥，并将其替换到<code><script></script>标签中的YOUR_API_KEY

Dari segi paparan peta, kaedah yang paling biasa digunakan ialah menggunakan API Peta Google. Berikut ialah contoh mudah: