高德地图--控件的封装--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();