mui：在javascript中使用百度地图实现精确定位（一）

来源：互联网发布：pscc2018软件下载编辑：程序博客网时间：2024/05/17 08:43

这一篇文章的方法只能定位到城市一级，需要更精确，可以看这篇文章
http://blog.csdn.net/qq_32635069/article/details/77801988

在国内一般都使用百度地图、高德地图等来实现定位，
首先你要申请密钥，可以参考网上的教程https://jingyan.baidu.com/article/363872eccda8286e4aa16f4e.html
其次就是使用了，引入

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你申请的ak码">

这样你就可以调用百度地图的API了，然后在这里要说的是定位，获取经纬度

//判断手机浏览器是否支持定位    if(navigator.geolocation) {        var geolocation = new BMap.Geolocation(); //创建定位实例        geolocation.getCurrentPosition(showLocation, {            enableHighAccuracy: true        }); //enableHighAccuracy 要求浏览器获取最佳结果    } else {        map.addControl(new BMap.GeolocationControl()); //添加定位控件 支持定位    }

将经纬度解析为地址

var gc = new BMap.Geocoder();//将坐标转换成地址gc.getLocation(centerPoint,function(rs){                var addComp = rs.addressComponents;                  var mapAddress = addComp.province + addComp.city + addComp.district                  + addComp.street + addComp.streetNumber;                   //mui.alert(mapAddress);                var address = document.getElementById('address');                address.value=mapAddress;                address.readOnly='readonly';            });

下面是完整的样例

<!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" />        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />        <link href="../../css/mui.min.css" rel="stylesheet" />        <script src="../../js/mui.min.js"></script>        <style type="text/css">            body,            html,            #allmap {                width: 100%;                height: 80%;                overflow: hidden;                font-family: "微软雅黑";            }        </style>        <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你申请的ak码"></script>        <title>地图展示</title>    </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>        <input type="text" id="address" />    </body></html><script type="text/javascript">    var map = new BMap.Map("allmap");    //初始化地图 默认加载北京天安门    var point = new BMap.Point(116.331398, 39.897445);    map.centerAndZoom(point, 16); //初始化地图，point为中心点，缩放级别为16    //判断手机浏览器是否支持定位    if(navigator.geolocation) {        var geolocation = new BMap.Geolocation(); //创建定位实例        geolocation.getCurrentPosition(showLocation, {            enableHighAccuracy: true        }); //enableHighAccuracy 要求浏览器获取最佳结果    } else {        map.addControl(new BMap.GeolocationControl()); //添加定位控件 支持定位    }    var gc = new BMap.Geocoder();//将坐标转换成地址    //处理定位后的信息    function showLocation(r) {        if(this.getStatus() == BMAP_STATUS_SUCCESS) { //定位成功            //新建中心点 并将地图中心移动过去            var centerPoint = new BMap.Point(r.longitude, r.latitude);            map.panTo(centerPoint);            map.setCenter(centerPoint);            gc.getLocation(centerPoint,function(rs){                var addComp = rs.addressComponents;                  var mapAddress = addComp.province + addComp.city + addComp.district                  + addComp.street + addComp.streetNumber;                   //mui.alert(mapAddress);                var address = document.getElementById('address');                address.value=mapAddress;                address.readOnly='readonly';            });            //新建标注            var mk = new BMap.Marker(centerPoint);            mk.disableDragging(); // 不可拖拽            map.addOverlay(mk);        } else {            mui.alert('failed' + this.getStatus()); //定位失败        }    }</script>

阅读全文

1 0