js h5怎么调用手机的地图定位

JS H5调用手机的地图定位，需要通过HTML5的地理位置API、适当的地图服务接口（如Google Maps、Baidu Maps等）以及必要的JavaScript代码来实现。具体步骤为：获取地理位置、显示地图、标记位置。以下将详细介绍如何实现这些步骤。

一、获取地理位置

HTML5提供了一个简单的API来获取设备的地理位置。这个API就是navigator.geolocation。通过调用navigator.geolocation.getCurrentPosition方法，我们可以获取设备的当前经纬度。

获取地理位置的代码示例：

if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition, showError);
} else {
    alert("Geolocation is not supported by this browser.");
}
function showPosition(position) {
    var lat = position.coords.latitude;
    var lon = position.coords.longitude;
    console.log("Latitude: " + lat + ", Longitude: " + lon);
    // 可以将lat和lon传递给地图API进行进一步处理
}
function showError(error) {
    switch(error.code) {
        case error.PERMISSION_DENIED:
            alert("User denied the request for Geolocation.");
            break;
        case error.POSITION_UNAVAILABLE:
            alert("Location information is unavailable.");
            break;
        case error.TIMEOUT:
            alert("The request to get user location timed out.");
            break;
        case error.UNKNOWN_ERROR:
            alert("An unknown error occurred.");
            break;
    }
}

二、显示地图

获取到设备的经纬度后，我们需要选择一个地图服务来显示地图和标记位置。常用的地图服务有Google Maps、Baidu Maps等。以下将分别介绍如何使用这两种服务来显示地图。

使用Google Maps

首先，需要在HTML中引入Google Maps的API脚本：

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

然后，初始化地图并标记位置：

function initMap() {
    var lat = 0; // 默认值，需替换为实际获取的经纬度
    var lon = 0; // 默认值，需替换为实际获取的经纬度
    var map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: lat, lng: lon},
        zoom: 15
    });
    var marker = new google.maps.Marker({
        position: {lat: lat, lng: lon},
        map: map
    });
}

使用Baidu Maps

首先，需要在HTML中引入Baidu Maps的API脚本：

<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=YOUR_API_KEY"></script>

然后，初始化地图并标记位置：

function initMap() {
    var lat = 0; // 默认值，需替换为实际获取的经纬度
    var lon = 0; // 默认值，需替换为实际获取的经纬度
    var map = new BMap.Map("map"); // 创建Map实例
    var point = new BMap.Point(lon, lat); // 创建点坐标
    map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别
    var marker = new BMap.Marker(point); // 创建标注
    map.addOverlay(marker); // 将标注添加到地图中
}

三、标记位置

在获取到设备的地理位置并显示地图后，下一步就是在地图上标记该位置。不同的地图服务有不同的标记方法，上文已经分别介绍了Google Maps和Baidu Maps的标记方法。

四、结合完整的示例代码

下面是一个完整的示例代码，展示了如何使用HTML5地理位置API获取设备的经纬度，并使用Google Maps显示地图和标记位置：

<!DOCTYPE html>
<html>
<head>
    <title>Geolocation API Example</title>
    <style>
        #map {
            height: 100%;
            width: 100%;
        }
    </style>
</head>
<body>
    <h1>Geolocation API Example</h1>
    <div id="map"></div>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>
    <script>
        var map, marker;
        function initMap() {
            // 默认中心位置
            var defaultLocation = {lat: 0, lng: 0};
            map = new google.maps.Map(document.getElementById('map'), {
                center: defaultLocation,
                zoom: 15
            });
            marker = new google.maps.Marker({
                position: defaultLocation,
                map: map
            });
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(showPosition, showError);
            } else {
                alert("Geolocation is not supported by this browser.");
            }
        }
        function showPosition(position) {
            var lat = position.coords.latitude;
            var lon = position.coords.longitude;
            var location = {lat: lat, lng: lon};
            map.setCenter(location);
            marker.setPosition(location);
        }
        function showError(error) {
            switch(error.code) {
                case error.PERMISSION_DENIED:
                    alert("User denied the request for Geolocation.");
                    break;
                case error.POSITION_UNAVAILABLE:
                    alert("Location information is unavailable.");
                    break;
                case error.TIMEOUT:
                    alert("The request to get user location timed out.");
                    break;
                case error.UNKNOWN_ERROR:
                    alert("An unknown error occurred.");
                    break;
            }
        }
    </script>
</body>
</html>

总结：通过HTML5的地理位置API获取设备的经纬度，并结合地图服务接口（如Google Maps、Baidu Maps等）显示地图和标记位置，可以实现JS H5调用手机的地图定位功能。获取地理位置、显示地图、标记位置是实现这一功能的核心步骤。