高德地图js如何定位显示出来

高德地图JS如何定位显示出来：使用高德地图JS API进行定位并显示出来需要获取用户位置、初始化地图、创建并添加标记、配置定位插件等步骤。详细过程如下：

获取用户位置：通过浏览器的Geolocation API获取用户当前位置；
初始化地图：使用高德地图JS API初始化地图；
创建并添加标记：在获取的位置点创建并添加标记；
配置定位插件：使用高德地图提供的定位插件，提升定位精度。

一、获取用户位置

使用HTML5的Geolocation API可以获取用户的地理位置。以下是一个简单的示例：

if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition, showError);
} else {
    console.log("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);
}
function showError(error) {
    switch(error.code) {
        case error.PERMISSION_DENIED:
            console.log("User denied the request for Geolocation.");
            break;
        case error.POSITION_UNAVAILABLE:
            console.log("Location information is unavailable.");
            break;
        case error.TIMEOUT:
            console.log("The request to get user location timed out.");
            break;
        case error.UNKNOWN_ERROR:
            console.log("An unknown error occurred.");
            break;
    }
}

二、初始化地图

在获取到用户的位置后，可以使用高德地图JS API初始化地图。首先，需要在HTML中引入高德地图的JS API：

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您的高德Key"></script>

接着，在获取到位置后初始化地图：

function initMap(lat, lon) {
    var map = new AMap.Map('container', {
        resizeEnable: true,
        center: [lon, lat], // 设置地图中心点
        zoom: 15 // 设置地图缩放级别
    });
}

三、创建并添加标记

在地图初始化后，可以在地图上添加标记以显示当前位置：

function addMarker(map, lat, lon) {
    var marker = new AMap.Marker({
        position: new AMap.LngLat(lon, lat), // 设置标记位置
        title: '当前位置'
    });
    map.add(marker); // 将标记添加到地图上
}

四、配置定位插件

高德地图JS API提供了定位插件，可以更精确地获取用户位置：

AMap.plugin('AMap.Geolocation', function() {
    var geolocation = new AMap.Geolocation({
        enableHighAccuracy: true, // 进行高精度定位
        timeout: 10000, // 设置定位超时时间
        maximumAge: 0, // 设置定位结果缓存时间
        convert: true, // 自动偏移坐标
        showButton: true, // 显示定位按钮
        buttonPosition: 'RB', // 定位按钮停靠位置
        buttonOffset: new AMap.Pixel(10, 20), // 定位按钮距离停靠位置的偏移量
        showMarker: true, // 定位成功后在定位位置显示标记
        showCircle: true, // 定位成功后用圆圈表示定位精度范围
        panToLocation: true, // 定位成功后将定位位置作为地图中心点
        zoomToAccuracy: true // 定位成功后调整地图视野范围使定位位置及精度范围可见
    });
    map.addControl(geolocation);
    geolocation.getCurrentPosition(function(status, result) {
        if (status == 'complete') {
            onComplete(result);
        } else {
            onError(result);
        }
    });
});

完整示例

将上述步骤整合到一起，形成一个完整的示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>高德地图JS定位示例</title>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您的高德Key"></script>
    <script type="text/javascript">
        function init() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(showPosition, showError);
            } else {
                console.log("Geolocation is not supported by this browser.");
            }
        }
        function showPosition(position) {
            var lat = position.coords.latitude;
            var lon = position.coords.longitude;
            initMap(lat, lon);
        }
        function showError(error) {
            switch(error.code) {
                case error.PERMISSION_DENIED:
                    console.log("User denied the request for Geolocation.");
                    break;
                case error.POSITION_UNAVAILABLE:
                    console.log("Location information is unavailable.");
                    break;
                case error.TIMEOUT:
                    console.log("The request to get user location timed out.");
                    break;
                case error.UNKNOWN_ERROR:
                    console.log("An unknown error occurred.");
                    break;
            }
        }
        function initMap(lat, lon) {
            var map = new AMap.Map('container', {
                resizeEnable: true,
                center: [lon, lat],
                zoom: 15
            });
            addMarker(map, lat, lon);
            configureGeolocation(map);
        }
        function addMarker(map, lat, lon) {
            var marker = new AMap.Marker({
                position: new AMap.LngLat(lon, lat),
                title: '当前位置'
            });
            map.add(marker);
        }
        function configureGeolocation(map) {
            AMap.plugin('AMap.Geolocation', function() {
                var geolocation = new AMap.Geolocation({
                    enableHighAccuracy: true,
                    timeout: 10000,
                    maximumAge: 0,
                    convert: true,
                    showButton: true,
                    buttonPosition: 'RB',
                    buttonOffset: new AMap.Pixel(10, 20),
                    showMarker: true,
                    showCircle: true,
                    panToLocation: true,
                    zoomToAccuracy: true
                });
                map.addControl(geolocation);
                geolocation.getCurrentPosition(function(status, result) {
                    if (status == 'complete') {
                        console.log('定位成功');
                    } else {
                        console.log('定位失败');
                    }
                });
            });
        }
    </script>
</head>
<body onload="init()">
    <div id="container" style="width: 100%; height: 100vh;"></div>
</body>
</html>

通过上述步骤和示例代码，可以在网页中实现高德地图JS的定位和显示功能。获取用户位置、初始化地图、创建并添加标记、配置定位插件是实现这一功能的关键步骤。