zoukankan      html  css  js  c++  java
  • web开发如何使用高德地图API(一)浏览器定位

    说两句:

    • 以下内容除了我自己写的部分,其他部分在高德开放平台都有(可点击外链访问)。
    • 我所整理的内容以实际项目为基础希望更有针对性的,更精简。
    • 点击直奔主题。

    准备工作:

    • 首先,注册开发者账号,成为高德开放平台开发者
    • 登陆之后,在进入「应用管理」 页面「创建新应用」
    • 为应用添加 Key,「服务平台」一项请选择「 Web 端 ( JSAPI ) 

    拿到key之后,在页面引入高德API和UI组件库以及相关CSS文件

    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
    <script src="http://cache.amap.com/lbs/static/es5.min.js"></script>
    <script src="http://webapi.amap.com/maps?v=1.4.3&key=3853mark的key不告诉你138eacc13d55806d&plugin=AMap.PlaceSearch,AMap.AdvancedInfoWindow"></script>
    <script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>

    显示基础地图所用到的HTML和JS

    <body>
    <div id="container"></div>
    </body>
    <script type="text/javascript">
        var map = new AMap.Map('container', {
            resizeEnable: true,
            zoom:11,
            center: [116.397428, 39.90923]//默认的地图中心经纬度
        });
    </script>

    引入高德地图工具包js文件

    <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>

    浏览器定位所用到的JS

    /**
     * Created by Mark on 2018/5/3.
     */
    //定位
    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);      //返回定位出错信息
    });
    
    //解析定位结果
    function onComplete(data) {
        if(data.status == 1){
            console.log("定位成功");
            $("#addressInput").val(data.formattedAddress);
            sessionStorage.setItem("dingWei-lng",data.position.getLng());
            sessionStorage.setItem("dingWei-lat",data.position.getLat());
        }
        var str = [];
        str.push('经度:' + data.position.getLng());
        str.push('纬度:' + data.position.getLat());
        str.push('是否经过偏移:' + (data.isConverted ? '是' : '否'));
        console.log(str.join('<br>'));
    }
    function onError() {
        var str = [];
        str.push('定位失败');
        console.log(str.join('<br>'));
    }
    到这里为止,使用高德地图实现浏览器定位已经完成了。
    但是...^_^
    /***************************************
    由于Chrome、IOS10等已不再支持非安全域的浏览器定位请求,为保证定位成功率和精度,请尽快升级您的站点到HTTPS。
    ***************************************/
  • 相关阅读:
    下载文件总结
    用PHP,怎么获取PHP.ini中的文件上传最大的字节数。也就是默认的2M
    TP框架下载功能 - 不想下天桥 - 博客园
    CSS,font-family,好看常用的中文字体
    安装Wamp后 Apache无法启动的解决方法
    :nth-child(n)
    list-style
    netbeans常用快捷键
    ideaic快捷键
    配置nutch
  • 原文地址:https://www.cnblogs.com/meng-ma-blogs/p/9278138.html
Copyright © 2011-2022 走看看