美文网首页Web前端之路
高德地图--控件的封装--2

高德地图--控件的封装--2

作者: 陈宝玉啊 | 来源:发表于2019-08-21 19:13 被阅读92次

    哈喽各位小伙伴们。因为自己原因推迟了好长时间才开始写这篇文章。
    今天为大家带来后面两种控件封装方法、以及浏览器获取当前经纬度的方法

    1.快速生成工具类 ---指定地图控件

    /**
     * @param {*} how  初始化的地图变量名  
     * @param {*} options  数组形式 放入想要异步加载的工具。options每个元素对应一个对象。
                           格式为:name:指定当前插件的名称、option:{} 指的是为当前插件做的配置
     */
    function makeToolBar(how, options) {
        // nameArr:插件名称数组    optionArr:相关配置文件的数组
        var nameArr = [],
            optionArr = [];
        for (let i = 0; i < options.length; i++) {
            nameArr.push(options[i].name);
            // 判断是否有option参数
            if (options[i].option == undefined) {
                optionArr.push('');
            } else {
                optionArr.push(options[i].option);
            }
        }
        AMap.plugin(nameArr, function () {
            for (let i = 0; i < nameArr.length; i++) {
                var index = `new ${nameArr[i]}(${JSON.stringify(optionArr[i])})`;
                how.addControl(eval(index));
            }
        });
    }
    
    调用规则
            // 工具条--地图控件
            makeToolBar(map, [{
                name: 'AMap.ToolBar',
                option: {
                    liteStyle: true, //是否精简模式
                    position: 'LT' //位置
                }
            }, {
                name: 'AMap.Geolocation',
                option: {
                    buttonPosition: 'RT'
                }
            }, {
                name: 'AMap.OverView',
            }, {
                name: 'AMap.Scale',
            }])
    

    2.设置鼠标样式

    /**
     * @param {*} how  初始化的地图变量名  
     * @param {*} type  字符串  类型:default:默认    pointer:单手指  move:鼠标移动  crosshair:十字线
     */
    function setCursor(how, type = 'default') {
        how.setDefaultCursor(type);
    }
    
    调用规则
    setCursor(map,'move');
    

    3.获取当前经纬度

    function getLocation() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(showPosition, showError);
        } else {
            alert("浏览器不支持地理定位。");
        }
    }
    
    function showError(error) {
        switch (error.code) {
            case error.PERMISSION_DENIED:
                alert("定位失败,用户拒绝请求地理定位");
                break;
            case error.POSITION_UNAVAILABLE:
                alert("定位失败,位置信息是不可用");
                break;
            case error.TIMEOUT:
                alert("定位失败,请求获取用户位置超时");
                break;
            case error.UNKNOWN_ERROR:
                alert("定位失败,定位系统失效");
                break;
        }
    }
    
    function showPosition(position) {
        var lat = position.coords.latitude; //纬度 
        var lag = position.coords.longitude; //经度 
        alert('纬度:' + lat + ',经度:' + lag);
    }
    
    调用规则
    getLocation();
    

    相关文章

      网友评论

        本文标题:高德地图--控件的封装--2

        本文链接:https://www.haomeiwen.com/subject/vgnisctx.html