百度地图获取经纬度和具体位置

最新推荐文章于 2024-05-10 20:32:03 发布

靖瑶_

最新推荐文章于 2024-05-10 20:32:03 发布

阅读量140

点赞数 1

分类专栏： java 文章标签：百度定位

本文链接：https://blog.csdn.net/weixin_52380943/article/details/117470613

版权

java 专栏收录该内容

51 篇文章 5 订阅

订阅专栏

注

<script type="text/javascript" src="http://api.map.baidu.com/api?ak=百度地图接口申请自己的ak"></script>

百度地图开发地址：（申请ak密钥）

https://lbsyun.baidu.com/

在这里插入图片描述

申请密钥里有白名单里要写，写“ * ”就可以

<!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>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
        }

        #bigMap {
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: -1;
            top: 0;
            left: 0;
        }

    </style>
</head>

<body>
<div class="box" style="text-align: center;background: white; padding: 10px;">
    <div style="font-weight: bold;">获取到的信息</div>
    <div>纬度：<input type="text" id="lat" value="" readonly></div>
    <div>经度：<input type="text" id="lng" value="" readonly></div>
    <div>地址 ：<input type="text" id="address" readonly></div>
</div>
<div id='bigMap'></div>
</body>

</html>


<script type="text/javascript" src="http://api.map.baidu.com/api?ak=百度地图接口申请自己的ak"></script>

<script>

    var map = new BMap.Map("bigMap");
    var geoc = new BMap.Geocoder();   //地址解析对象
    var markersArray = [];
    var geolocation = new BMap.Geolocation();


    var point = new BMap.Point(116.404412, 39.914714);
    map.centerAndZoom(point, 12); // 中心点
    geolocation.getCurrentPosition(function (r) {
        if (this.getStatus() == BMAP_STATUS_SUCCESS) {
            var mk = new BMap.Marker(r.point);
            map.addOverlay(mk);
            map.panTo(r.point);
            map.enableScrollWheelZoom(true);
        }
        else {
            alert('failed' + this.getStatus());
        }
    }, { enableHighAccuracy: true })
    map.addEventListener("click", showInfo);


    //清除标识
    function clearOverlays() {
        if (markersArray) {
            for (i in markersArray) {
                map.removeOverlay(markersArray[i])
            }
        }
    }
    //地图上标注
    function addMarker(point) {
        var marker = new BMap.Marker(point);
        markersArray.push(marker);
        clearOverlays();
        map.addOverlay(marker);
    }
    //点击地图时间处理
    function showInfo(e) {
        document.getElementById('lng').value = e.point.lng;
        document.getElementById('lat').value = e.point.lat;
        geoc.getLocation(e.point, function (rs) {
            var addComp = rs.addressComponents;
            var address = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;
            if (confirm("确定要地址是" + address + "?")) {
                document.getElementById('address').value = address;
            }
        });
        addMarker(e.point);
    }


</script>

靖瑶_

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
百度地图获取经纬度和具体位置

注<script type="text/javascript" src="http://api.map.baidu.com/api?ak=百度地图接口申请自己的ak"></script>百度地图开发地址：（申请ak密钥）https://lbsyun.baidu.com/申请密钥里有白名单里要写，写“ * ”就可以<!DOCTYPE html><html lang="en"><head> <meta cha
复制链接

扫一扫