html html5地理位置api +谷歌地图方向api显示用户位置和最近的道路名称

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html html5地理位置api +谷歌地图方向api显示用户位置和最近的道路名称相关的知识，希望对你有一定的参考价值。

function displayMap() {
    navigator.geolocation.getCurrentPosition(function(position) {
        var coordinates = new google.maps.LatLng(position.coords.latitude,
            position.coords.longitude);
        var map = new google.maps.Map(document.body, {
            center: coordinates,
            zoom: 17
        });

        var direction = new google.maps.DirectionsService();
        direction.route({
            origin: coordinates,
            destination: coordinates,
            travelMode: google.maps.DirectionsTravelMode.DRIVING
        }, function (response, status) {
            var marker = new google.maps.Marker({
                position: coordinates,
                title: response.routes[0].legs[0].start_address,
                map: map
            });
        });
    });
}

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html,
body {
    height: 100vh;
}

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Geolocation API</title>
        <link rel="stylesheet" href="main.css">
    </head>

    <body>
        <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBdhHU9eaIJBJfoKj2fnpGRIJdcGBz07Qg&callback=displayMap" defer async></script>
        <script src="main.js"></script>
    </body>
</html>

以上是关于html html5地理位置api +谷歌地图方向api显示用户位置和最近的道路名称的主要内容，如果未能解决你的问题，请参考以下文章

HTML5调用百度地图API进行地理定位实例

Html5之应用-1 Geolocation(Geolocation百度地图API)

HTML5地理定位，百度地图API，知识点熟悉

全面的 html5 音频 API

HTML5怎么用高德地图API返回当前位置的经纬度

html5中高德腾讯百度 地图api调起手机app