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

Caleb ... 2020-01-01
  • JS
  • Amap
大约 2 分钟

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

# 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));
        }
    });
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

# 调用规则

// 工具条--地图控件
makeToolBar(map, [{
    name: 'AMap.ToolBar',
    option: {
        liteStyle: true, //是否精简模式
        position: 'LT' //位置
    }
}, {
    name: 'AMap.Geolocation',
    option: {
        buttonPosition: 'RT'
    }
}, {
    name: 'AMap.OverView',
}, {
    name: 'AMap.Scale',
}])
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 2.设置鼠标样式

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

# 调用规则

setCursor(map,'move');
1

# 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);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

# 调用规则

getLocation();
1
打赏