zoukankan      html  css  js  c++  java
  • 百度地图和高德地图结合在web中的使用(二)

    百度地图在web中的使用(二)

    背景:在做一个关于地理位置字段时,初始位置使用百度地图获取时失败,获取的位置信息不准确,奈何产品说友商好使的啊,F12看后是采用的高德,所以在这采用高德地图获取初始位置,其他的还是用百度地图


    1. 注册高德,创建实例,获取key值
    2. 引入js
    3. 高德地图获取获取当前位置:
    //获取当前位置
    function getCurrentLocation(){
        var gdmap, geolocation;
        //加载地图,调用浏览器定位服务
        gdmap = new AMap.Map('');   //创建实例(如果需要地图页面,参数不为空,参数为div的id值)
        gdmap.plugin('AMap.Geolocation', function() {
            geolocation = new AMap.Geolocation({
                enableHighAccuracy: true,//是否使用高精度定位,默认:true
                timeout: 10000,          //超过10秒后停止定位,默认:无穷大
            });
            gdmap.addControl(geolocation);
            geolocation.getCurrentPosition();
            AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
            AMap.event.addListener(geolocation, 'error', onError);      //返回定位出错信息
        });
    }
    /*
     * 解析位置结果,得到高德的经纬度地址
     */
    function onComplete(data){
        var gdlng = data.position.getLng();
        var gdlat = data.position.getLat();
        bd_encrypt(gdlng, gdlat);
    }
    //定位出错
    function onError(data){
        window.parent.tipObj.showError('未检测到您的当前位置,请刷新后重试',3);
        return false;
    }
    
    1. 高德坐标转百度(传入经度、纬度)
    /*
     * 高德坐标转百度(传入经度、纬度),得到百度的经纬度
     * @param gdlng  高德经度
     * @param gdlat  高德纬度
     */
    function bd_encrypt(gdlng, gdlat){
        var X_PI = Math.PI * 3000.0 / 180.0;
        var x = gdlng, y = gdlat;
        var z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * X_PI);
        var theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * X_PI);
        var bd_lng = (z * Math.cos(theta) + 0.0065).toFixed(8);
        var bd_lat = (z * Math.sin(theta) + 0.006).toFixed(8);
        getAddressBylnglat(bd_lng, bd_lat);  //自定义方法,通过百度api获取地址
    }
    
    1. 根据百度经纬度获取详细地址
    /*
     * 参数为百度的经纬度
     */
    function getAddressBylnglat(lng, lat){
        var aId = $("#aId").val();
        point = new BMap.Point(lng, lat);
        var getData = new BMap.Geocoder();  //根据经纬度获取地址
        getData.getLocation(point, function(rs){
            var pointAddress = rs.addressComponents;
            var address = pointAddress.province+pointAddress.city+pointAddress.district+pointAddress.street+pointAddress.streetNumber;
            var localAddress = address + ','+ '经度:' + lng + '、'+'纬度:'+lat;
            //HACK 保存当前位置(暴力解决下吧)
            sessionStorage.setItem('currentLocation_'+aId,  localAddress);   //把获取到的当前位置信息保存在sessionStorage中来使用
        });
    }
    
  • 相关阅读:
    关于游戏
    学习lucene5.5.4的笔记
    lucene中文学习地址推荐
    lucene的使用与优化
    进一步了解this和super
    被遗忘的设计模式——空对象模式(Null Object Pattern)
    Java 空对象设计模式(Null Object Pattern) 讲解
    java的动态代理机制详解
    为什么要使用代理模式
    大O 表示法
  • 原文地址:https://www.cnblogs.com/alisleepy/p/9982366.html
Copyright © 2011-2022 走看看