百度地图API根据所选获取经纬度demo

实现效果,点击地图位置,获取所选地点的经纬度
在这里插入图片描述
代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>地图展示</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">

    <style>
        #container {
    
    
            width: 100%;
            height: 900px;
            overflow: hidden;
        }
    </style>
    <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=你的秘钥"></script><!--你的秘钥(这个可以自己搜百度地图API申请)-->
</head>
<body>
    <form class="layui-form">
        经度
        <input type="text" id="longitude"   value="114.42" disabled>
        纬度
        <input type="text" id="latitude" value="30.50" disabled>
        <div id='container'></div>
    </form>
</body>
</html>
<script>
    //构建地图
    var map = new BMapGL.Map('container');//构建地图
    map.centerAndZoom(new BMapGL.Point(longitude.value, latitude.value), 18); // 初始化地图,设置中心点坐标和地图级别
    var marker = new BMapGL.Marker(new BMapGL.Point(longitude.value, latitude.value)); // 创建点标记
    map.addOverlay(marker);    // 在地图上添加点标记
    map.enableScrollWheelZoom(true); //启用滚轮放大缩小。

    //地图点击事件
    map.addEventListener("click", function (e) {
    
    
        longitude.value = e.latlng.lng;
        latitude.value = e.latlng.lat;
        //清空已有标记map.clearOverlays()
        var marker = new BMapGL.Marker(new BMapGL.Point(longitude.value, latitude.value));
        // 在地图上添加点标记
        map.addOverlay(marker);
    });
</script>




猜你喜欢

转载自blog.csdn.net/q1923408717/article/details/114978046