您现在的位置是:首页 > 正文

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

2024-04-01 01:47:31阅读 2

使用到的百度地图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

这是我的效果图

网站文章

  • ubuntu16.04离线安装mysql5.7.33

    由于一些原因,服务器不能联网,只能在一台能联网的机子上面下载相关软件,再将这台机子和服务器连接到一个局域网内,然后将下载好的软件传到服务器上。 有的软件可以很方便地安装。比如node和npm,但在安装...

    2024-04-01 01:47:24
  • session和cookie的区别

    session和cookie的区别

    cookie和session的区别

    2024-04-01 01:47:17
  • javaweb超级简单网上购物商城系统源码SSM框架结构

    javaweb超级简单网上购物商城系统源码SSM框架结构

    javaweb线上网上购物商城系统,采用ssm框架设计

    2024-04-01 01:46:51
  • 机器学习——实践

    机器学习——实践

    比如风控或者入侵检测,这两类任务都具有严重的数据不平衡问题,可以在算法学习的时候,为少类样本设置更高的学习权重,从而让算法更加专注于少类样本的分类情况,提高对少类样本分类的查全率,但是也会将很多多类样...

    2024-04-01 01:46:46
  • 配置中心ETCD搭建与简单使用 热门推荐

    1 ETCD配置 1.1 Ubuntu安装ETCD 以下配置均在Ubuntu16.04系统中。 (1)使用wget命令对ETCD进行安装 wget https://github.com/etcd-io...

    2024-04-01 01:46:38
  • QT connect使用简单介绍 最新发布

    QT connect使用简单介绍 最新发布

    QT connect 使用简单介绍

    2024-04-01 01:46:31
  • 吃豆人html代码原理,如何用HTML做一个吃豆人?

    吃豆人html代码原理,如何用HTML做一个吃豆人?

    首先做一个项目的先想如何去实现它。比如做一个吃豆人,如图:167b84dcbf0d3ed647b6b8c4abd75f92.jpg首先,需要分析这个吃豆人的组成部分。上半部分嘴,下半部分嘴,豆基本就三...

    2024-04-01 01:46:06
  • linux命令行设置颜色

    linux命令行设置颜色

    最近一直用linux,看着命令行一成不变的颜色,真的无语!话不多说,直接上教程。 1、编辑.bashrc文件. vim .bashrc 2、在.bashrc文件最后一行加入以下设置。(vim编辑器输入...

    2024-04-01 01:45:51
  • element--Cascader 点击文字选中+选中隐藏+多选

    //element Cascader 点击文字选中+选中隐藏+多选.el-cascader-panel .el-radio {width: 100%;height: 100%;z-index: 10;...

    2024-04-01 01:45:44
  • Vue-富文本编辑器组件封装之TinyMCE

    Vue-富文本编辑器组件封装之TinyMCE

    文章目录背景相关依赖接入说明中文文档组件汉化导入插件创建组件实例组件应用示例效果预览编辑器窗口上传图片效果内容小窗口预览遇到的问题及解决方案在dialog(弹窗)层级、遮挡问题预览效果宽度调整问题图片...

    2024-04-01 01:45:18