js通过高德地图获取当前位置的经度纬度

效果图如下:

已经获取到了经度纬度了

代码如下:

<!doctype html>
<html>

    <head>
        <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>
        <link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css" />
        <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.4&key=ad26780bfaabf0ca27ae6078e2e81682"></script>
        <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>

        <body>

            <div id=‘container‘ style=‘‘></div>

            <div id="tip"></div>
            <script type="text/javascript">
                /***************************************
                    由于Chrome、IOS10等已不再支持非安全域的浏览器定位请求,为保证定位成功率和精度,请尽快升级您的站点到HTTPS。
                    ***************************************/
                var map, geolocation;
                //加载地图,调用浏览器定位服务
                map = new AMap.Map(‘container‘, {
                    resizeEnable: true
                });
                map.plugin(‘AMap.Geolocation‘, function() {
                    geolocation = new AMap.Geolocation({
                        enableHighAccuracy: true, //是否使用高精度定位,默认:true
                        timeout: 10000, //超过10秒后停止定位,默认:无穷大
                        buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量,默认:Pixel(10, 20)
                        zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:false
                        buttonPosition: ‘RB‘
                    });
document.getElementById(‘tip‘).innerHTML="定位中,请勿操作,否则会定位失败";
document.getElementById("tip").style.color="red";
                    map.addControl(geolocation);
                    geolocation.getCurrentPosition();
                    AMap.event.addListener(geolocation, ‘complete‘, onComplete); //返回定位信息
                    AMap.event.addListener(geolocation, ‘error‘, onError); //返回定位出错信息
                });
                //解析定位结果
                function onComplete(data) {

                    var str = [];
console.log(data.position.getLat());
console.log(data.position.getLng());
                    str.push(data.position.getLat());
                    str.push(data.position.getLng());
                    //document.getElementById(‘tip‘).innerHTML = str;
document.getElementById(‘tip‘).innerHTML="定位成功";
document.getElementById("tip").style.color="#15A3FA";
setTimeout(tishi,3000);

                }

                //解析定位错误信息
                function onError(data) {
                    document.getElementById(‘tip‘).innerHTML = ‘定位失败请刷新再试‘;

                }

function tishi(){
  document.getElementById("tip").style.visibility="hidden";
}
            </script>
        </body>

</html>

原文地址:https://www.cnblogs.com/LoveQin/p/10223719.html

时间: 2024-10-11 08:17:39

js通过高德地图获取当前位置的经度纬度的相关文章

H5高德地图获取当前位置

<!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, wi

高德地图获取当前屏幕中心点的经纬度

公司有个需求就是要随着屏幕的改变而载入附近的商户信息. 那么高德地图获取当前屏幕中心点的经纬度呢? 核心方法:aMap.setOnCameraChangeListener(this); 实现接口: @Override public void onCameraChange(CameraPosition position) { LatLng target = position.target; System.out.println(target.latitude + "jinjin------&quo

android利用GPS和高德地图获取定位案例

一.main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" an

高德地图获取骑行距离,路线规划

1 高德地图路线规划  http://lbs.amap.com/api/javascript-api/reference/route-search 2 获取骑行距离 function getrding() { var map = new AMap.Map("container", { resizeEnable: true, center: [116.397428, 39.90923],//地图中心点 zoom: 16 //地图显示的缩放级别 }); //两个经纬度 自己定位获取到 va

高德JSAPI获取当前所在位置的经度纬度

这是在浏览器中的效果: 控制台打印出来的就是经度纬度的值 代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="init

高德地图获取道路接口、并将道路绘制

目标 :需要通过路的名字,将道路在地图中绘制出. 查找路的信息 通过路名搜索路 http://restapi.amap.com/v3/road/roadname?key=yourkey&keywords=靖江路&city=022 参数名称 参数含义 key 高德API 申请的key keywords 路名称 city 城市citycode 下载地址见参考文献 通过路id搜索路 http://restapi.amap.com/v3/road/roadid?city=020&key=y

高德地图 定位和位置信息获取

- (void)viewDidLoad { [super viewDidLoad]; self.navigationController.navigationBarHidden = YES; _mapView = [[MAMapView alloc] init]; _mapView.frame  =CGRectZero; [self.view addSubview:_mapView]; _mapView.showsUserLocation = YES; } -(void)mapView:(MAM

高德地图获取地图坐标

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>火星坐标拾取</title> <script language="javascript" src="http://webapi.amap.com/map

高德地图 获取sha1

开发版本sha1 控制台输入 cd .android  回车 再输入   keytool -list -v -keystore debug.keystore 回车 输入密钥库口令:  andorid 发布版本sha1 keytool -list -v -keystore 签名地址   回车 输入签名密码