Web前端之路

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

2019-08-21  本文已影响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();
上一篇下一篇

猜你喜欢

热点阅读