《高德地图》控件的封装之二

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

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