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

作者 : 开心源码 本文共1587个字,预计阅读时间需要4分钟 发布时间: 2022-05-13 共148人阅读

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

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();

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 高德地图–控件的封装–2

发表回复