首页javacript 如何使用本机定位显示定位自己位置，要html跟css+javascript代码

javacript 如何使用本机定位显示定位自己位置，要html跟css+javascript代码

时间: 2023-12-14 22:38:25 浏览: 71

以下是一个使用 JavaScript 和 HTML5 Geolocation API 进行本机定位并显示位置的例子： HTML 代码： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>本机定位</title> <style> #map { width: 500px; height: 500px; } </style> </head> <body> <div id="map"></div> <script src="app.js"></script> </body> </html> ``` CSS 代码： ```css #map { width: 500px; height: 500px; } ``` JavaScript 代码： ```javascript const mapElement = document.getElementById('map'); function initMap(lat, lng) { const location = new google.maps.LatLng(lat, lng); const options = { center: location, zoom: 16 }; const map = new google.maps.Map(mapElement, options); const marker = new google.maps.Marker({ position: location, map: map }); } if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(position => { const latitude = position.coords.latitude; const longitude = position.coords.longitude; initMap(latitude, longitude); }); } else { mapElement.innerHTML = '您的浏览器不支持本机定位。'; } ``` 这个例子中，我们使用 HTML5 Geolocation API 获取用户的位置，并使用 Google Maps API 在页面上显示一个地图和一个标记，标记显示用户的位置。如果用户的浏览器不支持本机定位，则会显示一条错误消息。需要注意的是，使用 Google Maps API 需要提供 API Key，可以在 Google Cloud Console 上获取。另外，需要将 Google Maps API 添加到 HTML 文件中的 head 标签中： ```html <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script> ``` 请将 YOUR_API_KEY 替换为您在 Google Cloud Console 上获取的 API Key。

阅读全文