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