zoukankan      html  css  js  c++  java
  • js高德地图手机定位

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <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="http://cache.amap.com/lbs/static/main1119.css" />
        <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.3&key=9f831272996d8fb9c2765393725e3f96"></script>
        <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
        <body>
            <div id='container'></div>
            <div id="tip"></div>
            <script type="text/javascript">
            /***************************************
            由于Chrome、IOS10等已不再支持非安全域的浏览器定位请求,为保证定位成功率和精度,请尽快升级您的站点到HTTPS。
            ***************************************/
            var map, geolocation;
            map = new AMap.Map('container');
            map.plugin('AMap.Geolocation', function() {
                geolocation = new AMap.Geolocation({
                    enableHighAccuracy: true, //是否使用高精度定位,默认:true
                    timeout: 10000, //超过10秒后停止定位,默认:无穷大
                    maximumAge: 0, //定位结果缓存0毫秒,默认:0
                    convert: true, //自动偏移坐标,偏移后的坐标为高德坐标,默认:true
                    showButton: true, //显示定位按钮,默认:true
                    buttonPosition: 'LB', //定位按钮停靠位置,默认:'LB',左下角
                    buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量,默认:Pixel(10, 20)
                    showMarker: true, //定位成功后在定位到的位置显示点标记,默认:true
                    showCircle: true, //定位成功后用圆圈表示定位精度范围,默认:true
                    panToLocation: true, //定位成功后将定位到的位置作为地图中心点,默认:true
                    zoomToAccuracy: true //定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:false
                });
                map.addControl(geolocation);
                geolocation.getCurrentPosition();
                AMap.event.addListener(geolocation, 'complete', onComplete); //返回定位信息
                AMap.event.addListener(geolocation, 'error', onError); //返回定位出错信息
            });
            var myplace = ''; //我的位置
            var mycity = ''; //我所在的城市
            //解析定位结果
            function onComplete(data) {
                var str = ['定位成功'];
                str.push('经度:' + data.position.getLng());
                str.push('纬度:' + data.position.getLat());
                if (data.accuracy) {
                    str.push('精度:' + data.accuracy + '');
                } //如为IP精确定位结果则没有精度信息
                str.push('是否经过偏移:' + (data.isConverted ? '' : ''));
                document.getElementById('tip').innerHTML = str.join('<br>');
                // parent.loca(data);
                myplace = data.formattedAddress; //我的位置
                mycity = data.addressComponent.city; //我所在的城市
                console.log('str',data.position.getLng(),data.position.getLat());
                console.log("我所在的地点为 " + data.formattedAddress);
                console.log("我所在的城市为 " + data.addressComponent.city);
            }
    
            function getSomeOfMyVal() {
                return myplace + "+" + mycity;
            }
    
            //解析定位错误信息
            function onError(data) {
                document.getElementById('tip').innerHTML = '定位失败';
            }
    
            function getGeolocation() {
                geolocation.getCurrentPosition();
    
            }
            </script>
        </body>
    
    </html>
  • 相关阅读:
    Mac php使用gd库出错 Call to undefined function imagettftext()
    centos 使用 locate
    Mac HomeBrew 安装 mysql
    zsh 命令提示符 PROMPT
    新的开始
    Java 面试题分析
    Java NIO Show All Files
    正确使用 Volatile 变量
    面试题整理 2017
    有10阶梯, 每次走1,2 or 3 阶,有多少种方式???
  • 原文地址:https://www.cnblogs.com/Byme/p/10196262.html
Copyright © 2011-2022 走看看