网页获取经纬度

最新推荐文章于 2023-10-25 13:27:36 发布

一杯敬朝阳一杯敬月光

最新推荐文章于 2023-10-25 13:27:36 发布

阅读量540

点赞数

分类专栏：记录

本文链接：https://blog.csdn.net/weixin_43306095/article/details/108344030

版权

记录专栏收录该内容

22 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <title>前端定位模块</title> 
    
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&amp;ak=DBewxGYKWir7BPTzGATdVjHQIUckC8jY&amp;services=&amp;t=20151113040005"></script>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=DBewxGYKWir7BPTzGATdVjHQIUckC8jY&services=&t=20151113040005"></script>
    <script crossorigin="anonymous" integrity="sha384-AQhQSZGQWTMJhb/TdS7NWpCmOM/8lIEsaevSU5oZtt8pQKoa+uJL4A2WnQ0O5Zj2" src="https://lib.baomitu.com/jquery/3.5.0/jquery.js"></script>
    <style>
        .container{
            width: 200px;
        }
        .containera{
            width: 200px;
        }
    </style>
    
</head>
<body>
        <div class="am-form-group">
                            <label for="user-name" class="am-u-sm-3 am-form-label">所在地区 </label>
                            <div class="am-u-sm-9">
                                <input type="text" name="address" class="tpl-form-input" id="point" placeholder="请输入商家所在地区">
                            </div>
                        </div>
                        <div class="am-form-group">
                            <label class="am-u-sm-3 am-form-label" for="shop-shop_desccredit">地图</label>
                            <div class="am-u-sm-9">
                                <input type="text" readonly="false" name="shop_longitude" id="longitude" value="112.977728" class="txt">
                                <input type="text" readonly="false" name="shop_latitude" id="latitude" value="28.207567" class="txt">
                                <br /><br />
                                <div style="width:600px;height:500px;" id="allmap"></div>
                                <div class="hint-block">请在地图上添加标注</div>
                            </div>
                        </div>
        <script type="text/javascript">
        $(document).on('blur','#point',function(){
            var map = new BMap.Map("allmap");
            var point=$(this).val();
            map.centerAndZoom(point,20); // 中心位置和缩放倍数
            map.enableScrollWheelZoom(); // 添加滚动轴
            map.addControl(new BMap.NavigationControl()); // 添加左上角的标尺工具
            map.addControl(new BMap.NavigationControl());
            map.addControl(new BMap.ScaleControl());
            map.addControl(new BMap.OverviewMapControl());
            map.addControl(new BMap.MapTypeControl());
            map.setCurrentCity("长沙");
            var marker = new BMap.Marker(point); // 创建标注,即地图上的小红点
            map.addOverlay(marker);
            map.addEventListener("click",function(e){
                map.clearOverlays();
                $("#longitude").val(e.point.lng);
                $("#latitude").val(e.point.lat);
                var marker1 = new BMap.Marker(new BMap.Point(e.point.lng, e.point.lat));  // 创建标注
                map.addOverlay(marker1);
            });
        })
        var map = new BMap.Map("allmap");
        var point = new BMap.Point(112.977728,28.207567); // 需要标注的位置的经纬度
        map.centerAndZoom(point,15); // 中心位置和缩放倍数
        map.enableScrollWheelZoom(); // 添加滚动轴
        map.addControl(new BMap.NavigationControl()); // 添加左上角的标尺工具
        map.addControl(new BMap.NavigationControl());
        map.addControl(new BMap.ScaleControl());
        map.addControl(new BMap.OverviewMapControl());
        map.addControl(new BMap.MapTypeControl());
        map.setCurrentCity("长沙");
        var marker = new BMap.Marker(point); // 创建标注,即地图上的小红点
        map.addOverlay(marker);
        map.addEventListener("click",function(e){
            map.clearOverlays();
            $("#longitude").val(e.point.lng);
            $("#latitude").val(e.point.lat);
            var marker1 = new BMap.Marker(new BMap.Point(e.point.lng, e.point.lat));  // 创建标注
            map.addOverlay(marker1);
        });
    </script>
</body>
</html>

一杯敬朝阳一杯敬月光

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
网页获取经纬度

<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>前端定位模块</title> <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&
复制链接

扫一扫