mui写web项目，获取当前地理位置

来源：互联网发布：网络上jr是什么意思编辑：程序博客网时间：2024/05/22 03:49

百度+google了好久，终于实现了。二话不说直接上代码。。。。

依赖了百度地图的api，申请密钥，放在下文的你的密钥处，路径可能会变，最好看api。

<%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head>    <title>Title</title>    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">    <meta name="apple-mobile-web-app-capable" content="yes">    <meta name="apple-mobile-web-app-status-bar-style" content="black">    <link rel="stylesheet" href="/static/css/mui.min.css">    <script src="http://api.map.baidu.com/api?v=2.0&ak=你的密钥"></script></head><body><header class="mui-bar mui-bar-nav">    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>    <h1 class="mui-title">添加巡查记录</h1></header><div id="allmap"></div><div class="mui-content">    <form id="detail_form" class="mui-input-group">        <div class="mui-input-row">            <label>地理位置：</label>            <input type="text" class="mui-input-clear" id="geographic_position" name="geographicPosition">        </div>        <div class="mui-input-row">            <label>记录详情：</label>            <input type="text" class="mui-input-clear" name="branchName" placeholder="请输入检测机构">        </div>    </form></div><footer class="mui-bar mui-bar-tab" style="text-align: center">    <button id="add_btn" type="button" class="mui-btn mui-btn-primary" style="width: 100%" >添加</button></footer><script src="/static/js/mui.min.js"></script><script type="text/javascript">    mui.init();    // 百度地图API功能    var map = new BMap.Map("allmap");    // 添加带有定位的导航控件    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.location();    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);        document.getElementById("geographic_position").value = address;    });</script></body></html>

阅读全文

0 0