单击获取点击的经纬度

最新推荐文章于 2025-03-30 10:00:00 发布

qq_33645229

最新推荐文章于 2025-03-30 10:00:00 发布

阅读量1k

点赞数

今天分享一下前端点击地图上后获取地图经纬度，并标记下点下的位置，直接复制代码可用

<!DOCTYPE html>
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
<style type="text/css">  
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}  
</style>  
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=13hKkYUjCLhkhnRlidP7Bmor"></script>  
<title>单击获取点击的经纬度</title>  
</head>  
<body>  
<div id="allmap" style="width:800px;height:600px;"></div>  
</body>  
</html>  
<script type="text/javascript">  
    // 百度地图API功能  
    var map = new BMap.Map("allmap");  
    var mk;  
    map.centerAndZoom("广州", 12);  
    map.enableScrollWheelZoom();   //启用滚轮放大缩小，默认禁用  
    map.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用  
    map.enableInertialDragging();  
  
  
    //添加选择城市的控件  
    var size = new BMap.Size(50, 20);  
    map.addControl(new BMap.CityListControl({  
        anchor: BMAP_ANCHOR_TOP_RIGHT,  
        offset: size,  
        // 切换城市之间事件  
        // onChangeBefore: function(){  
        //    alert('before');  
        // },  
        // 切换城市之后事件  
        // onChangeAfter:function(){  
        //   alert('after');  
        // }  
    }));  
  
  
    //单击获取点击的经纬度  
    map.addEventListener("click", function (e) {  
        alert(e.point.lng + "," + e.point.lat);  
        map.removeOverlay(mk);  
        mk = new BMap.Marker(e.point);  
        map.addOverlay(mk);  
    });  
  
  
    // 添加带有定位的导航控件  
    var navigationControl = new BMap.NavigationControl({  
        // 靠左上角位置  
        anchor: BMAP_ANCHOR_TOP_LEFT,  
        // LARGE类型  
        type: BMAP_NAVIGATION_CONTROL_LARGE,  
        // 启用显示定位  
        enableGeolocation: true  
    });  
    map.addControl(navigationControl);  
    // 添加定位控件  
    var geolocationControl = new BMap.GeolocationControl();  
    geolocationControl.addEventListener("locationSuccess", function (e) {  
        // 定位成功事件  
        var address = '';  
        address += e.addressComponent.province;  
        address += e.addressComponent.city;  
        address += e.addressComponent.district;  
        address += e.addressComponent.street;  
        address += e.addressComponent.streetNumber;  
        //alert("当前定位地址为：" + address);  
    });  
    geolocationControl.addEventListener("locationError", function (e) {  
        // 定位失败事件  
        alert(e.message);  
    });  
    map.addControl(geolocationControl);  
  
  
    
</script>