zoukankan      html  css  js  c++  java
  • webapp定位

    <!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="../css/mui.min.css">
            <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.2&key=申请的key"></script>
    
            <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="tip7" style="margin-top: 5rem;">uuuu</div>
                <div id="tip72" style="margin-top: 5rem;">uuuu</div>
                <script type="text/javascript">
                    map = new AMap.Map('', {
                        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'
                        });
                        map.addControl(geolocation);
                        geolocation.getCurrentPosition();
                        AMap.event.addListener(geolocation, 'complete', onComplete); //返回定位信息
                        AMap.event.addListener(geolocation, 'error', onError); //返回定位出错信息
                    });
                    //解析定位结果
                    function onComplete(data) {
                        //逆地理编码
                        AMap.service('AMap.Geocoder', function() { //回调函数
                            //实例化Geocoder
                            geocoder = new AMap.Geocoder({
                                city: "010" //城市,默认:“全国”
                            });
                            var lnglatXY = [data.position.getLng(), data.position.getLat()]; //地图上所标点的坐标
                            geocoder.getAddress(lnglatXY, function(status, result) {
                                if(status === 'complete' && result.info === 'OK') {
                                    document.getElementById('tip72').innerHTML = result.regeocode.formattedAddress;
                                } else {
                                    //获取地址失败
                                    document.getElementById('tip72').innerHTML = "获取地址失败";
                                }
                            });
    
                        })
    
                        document.getElementById('tip7').innerHTML = str.join('<br>');
                    }
                    //解析定位错误信息
                    function onError(data) {
                        document.getElementById('tip7').innerHTML = '定位失败' + data.info + "_" + data.message;
                    }
                </script>
            </body>
            <script src="../js/mui.min.js"></script>
    
    </html>
  • 相关阅读:
    我是如何用三小时搞出个赚钱产品的?
    搭建一个基于nuxt.js的项目
    栅格系统
    git使用
    通过JS获取屏幕高度,借助屏幕高度设置div的高度
    如何理解盒模型
    e.target.value 和 this 的区别
    组件化设计:弹窗的使用逻辑
    uni-app 入坑记
    MAC 系统快捷键
  • 原文地址:https://www.cnblogs.com/thankyouGod/p/8025697.html
Copyright © 2011-2022 走看看