HTML5地理定位的实现

笨比来咯

于 2021-12-16 17:22:58 发布

阅读量1.1k

点赞数 1

CC 4.0 BY-SA版权

文章标签： html5 html javascript

本文链接：https://blog.csdn.net/qq_60358807/article/details/121978986

这篇博客介绍了如何使用HTML5的geolocation API获取用户地理位置，并结合百度地图展示定位。通过navigator.geolocation对象的getCurrentPosition方法获取坐标，然后创建BMap.Map实例，设置中心点并添加标注到地图上。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天面试被问到地理定位的实现，问蒙蔽所以写个代码记录一下争强一下记忆力，一下代码是我的在w3c，以及观看一些大佬博客写的。如有不对，或侵权，联系删除

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=OhtLgj5FiNxP8i9qCIMjfU3hlPadHvVr"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            width: 100%;
            height: 100%;
        }
        #div{
            width: 100%;
            height: 600px;
            background-color: red;
        }
    </style>
</head>
<body>
    <button id="div"></button>
</body>
<script>
    let zbiao={
        latitude:'',
        longitude:''
    }
    let btn=document.getElementById('div')
    btn.onclick=function(){
        if (navigator.geolocation){//判断是否支持地理定位
            console.log(zbiao)
            navigator.geolocation.getCurrentPosition(showPosition,showError);

            var map = new BMap.Map("div");   /