asp.net中运用百度地图api获取客户端的经纬度的方法

最新推荐文章于 2023-08-15 15:23:21 发布

远星之云

最新推荐文章于 2023-08-15 15:23:21 发布

阅读量669

点赞数

文章标签： c语言 javascript asp.net

本文链接：https://blog.csdn.net/qq_40854193/article/details/104398627

版权

使用到的百度地图api接口需要自己申请成为开发者，点击百度地图开放平台进去注册。
在asp.net中：
前台页面代码：

<!doctype html>
<html>
<head runat="server">
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width" />
    <title>浏览器定位</title>
    <style type="text/css">
        html, body
        {
            height: 100%;
            margin: 0 auto;
            font-size: 12px;
        }
        body
        {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI" , Roboto, "Helvetica Neue" , Arial, sans-serif, "Apple Color Emoji" , "Segoe UI Emoji" , "Segoe UI Symbol" , "Noto Color Emoji";
            line-height: 1.5;
            font-weight: 300;
            color: #111213;
        }
        h4
        {
            font-family: inherit;
            line-height: 1.8;
            font-weight: 300;
            color: inherit;
            font-size: 1.1rem;
            margin-top: 0;
            margin-bottom: .5rem;
            font-size: 12px;
        }
        .info hr
        {
            margin-right: 0;
            margin-left: 0;
            border-top-color: grey;
        }
        
        .info
        {
            padding: .75rem 1.25rem;
            margin-bottom: 1rem;
            border-radius: .25rem;
            position: fixed;
            top: 1rem;
            background-color: white;
            width: auto;
            min-width:22rem;
            border-width: 0;
            box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
            margin: 0 auto;
            right: 1rem;
        }
        #container, #allmap
        {
            width: 100%;
            height: 30%; //这里设置百度地图显示的大小。
            top: 1rem;
            text-align: center;
            overflow: hidden;
            font-family: "微软雅黑";
        }
 
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak="自己在百度地图api申请到的密匙"></script>
</head>
<body>
    <div id="allmap" runat="server">
                        <%-- 这里一定放form的外面，不然是不能启用的--%>
    </div>
    <form id="form1" runat="server">
    <div>
        <div class="info" runat="server">
            <h4>经纬度信息：</h4>
            <h4>
                <input id="Text1" type="text" runat="server" readonly="readonly" style="min-width:21rem; text-align:center; font-size: 14px;
                    border-style: none; text-shadow: none; -webkit-appearance: none; box-shadow: none;outline:none; " />
                    <%-- 要设置input是不能填写内容的（readonly=""readonly），这个属性是与后台交互的，并且把边框去--%>
            </h4>
        </div>
    </div>
    </form>
</body>
<script type="text/javascript">
    // 百度地图API功能
    var map = new BMap.Map("allmap");
    var point = new BMap.Point(116.331398, 39.897445);
    map.centerAndZoom(point, 20);
    var geolocation = new BMap.Geolocation();
    geolocation.getCurrentPosition(function (r) {
        if (this.getStatus() == BMAP_STATUS_SUCCESS) {
            var mk = new BMap.Marker(r.point);
            map.addOverlay(mk);
            map.panTo(r.point);
            var project = r.point.lng + ',' + r.point.lat;
            document.getElementById('Text1').value = project; //这里把值返回到页面上的input控件，返回值是value，其它的不一定得
            return project;
        }
        else {
            alert('failed' + this.getStatus());
        }
    }, { enableHighAccuracy: true })
</script>
</html>

后台代码：

用自己的方法获取 Text1.Value的值就可以了，这里一定要用Value

这是我的效果图

远星之云

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
asp.net中运用百度地图api获取客户端的经纬度的方法

使用到的百度地图api接口需要自己申请成为开发者，点击百度地图开放平台进去注册。在asp.net中：前台页面代码：<!doctype html><html><head runat="server"> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" ...
复制链接

扫一扫