(十九)原生js案例之h5地里位置信息与高德地图的初使用

h5 地里位置信息

1. 获取当前位置信息

window.onload = function () {const oBtn = document.querySelector("#btn");const oBox = document.querySelector("#box");oBtn.onclick = function () {window.navigator.geolocation.getCurrentPosition(function (position) {console.log("🚀 ~ position:", position);const { latitude, longitude } = position.coords;oBox.innerHTML += `${latitude} ${longitude}`;},function (error) {console.log("🚀 ~ error:", error);},{enableHighAccuracy: true,timeout: 5000,});};
};

• 失败编码

  • 0 未知错误,不包括下面的
  • 1 用户拒绝
  • 2 尝试获取用户信息，但失败了
  • 3 超时，设置了 timeout 参数

• chrome 浏览器失败，edge 浏览器成功
  

• 数据收集，json 格式

  {"enableHighAccuracy": true, // 开启高精度，默认 false"timeout": 5000, // 超时时间，默认 infinity"maximumAge": 0 // 位置可以缓存时间，默认 0
  }
  

2. 获取当前位置信息

window.onload = function () {const oBtn = document.querySelector("#btn");const oBox = document.querySelector("#box");let timer = null;oBtn.onclick = function () {timer = window.navigator.geolocation.getCurrentPosition(function (position) {console.log("🚀 ~ position:", position);let str = "";for (const key in position.coords) {const value = position.coords[key];str += `${key}: ${value} <br/>`;}oBox.innerHTML = str;},function (error) {console.log("🚀 ~ error:", error);//移动端主要位置改变，这里就会一直报错//清除定时器window.navigator.geolocation.clearWatch(timer);},{enableHighAccuracy: true,timeout: 5000,frequence: 1000,maximumAge: 1000,});};
};

• h5 获取到地里位置信息后进行标注定位，配置使用高德地图

  • 封装高德地图，进行初始化

window._AMapSecurityConfig = {securityJsCode: "自己的key",
};class AMapHelper {static async getMap() {if (window.AMap) {return window.AMap;}let AMap = null;const baseConfig = {key: window._AMapSecurityConfig.securityJsCode, //申请好的Web端开发者 Key，调用 load 时必填version: "2.0", //指定要加载的 JS API 的版本，缺省时默认为 1.4.15};try {AMap = await AMapLoader.load(baseConfig);console.log("高德地图初始化");} catch (error) {console.log(error);}return AMap;}
}

• 拿到高德地图对象后，进行标记

window.onload = async function () {let timer = 0;await AMapHelper.getMap();let map = new AMap.Map("box", {resizeEnable: true,});getPos();function getPos() {timer = window.navigator.geolocation.getCurrentPosition(function (position) {console.log("🚀 ~ position:", position);//获取位置信息const { longitude, latitude } = position.coords;//创建标记const marker = new AMap.Marker({position: [longitude, latitude], //位置});map.add(marker); //添加到地图},function (error) {console.log("🚀 ~ error:", error);//移动端主要位置改变，这里就会一直报错//清除定时器window.navigator.geolocation.clearWatch(timer);},{enableHighAccuracy: true,timeout: 5000,frequence: 1000,maximumAge: 1000,});}
};

案例，高德地图添加标记，事件，自定义标记 ICON

window.onload = async function () {let timer = 0;await AMapHelper.getMap();// console.log(window.AMap);let map = new AMap.Map("box", {resizeEnable: true,});const content = ["<div><b>高德软件有限公司</b>","电话 : [phone]   邮编 : 100102","地址 : 北京市望京阜通东大街方恒国际中心A座16层</div>",];const icon = new AMap.Icon({size: new AMap.Size(25, 34), //图标尺寸image: "./img/site.png", //Icon 的图像imageOffset: new AMap.Pixel(-9, -3), //图像相对展示区域的偏移量，适于雪碧图等imageSize: new AMap.Size(135, 40), //根据所设置的大小拉伸或压缩图片});getPos();function getPos() {timer = window.navigator.geolocation.getCurrentPosition(function (position) {console.log("🚀 ~ position:", position);//获取位置信息const { longitude, latitude } = position.coords;//创建标记，自定义图片const marker = new AMap.Marker({position: new AMap.LngLat(longitude, latitude), //点标记的位置offset: new AMap.Pixel(-13, -30), //偏移量icon: icon, //添加 Icon 实例title: "高德科技",zooms: [2, 12], //点标记显示的层级范围，超过范围不显示});//添加窗体事件const infoWindow = new AMap.InfoWindow({//创建信息窗体isCustom: false, //使用自定义窗体// content: "<div id='info1'>这里可以显示自己的自定义描述内容</div>", //信息窗体的内容可以是任意html片段offset: new AMap.Pixel(16, -45),content,closeWhenClickMap: true,});//默认展示信息窗体infoWindow.open(map, [longitude, latitude]);const onMarkerClick = function (e) {// infoWindow.open(map, e.target.getPosition()); //点击打开信息窗体//e.target就是被点击的Marker};map.add(marker); //添加到地图marker.on("click", onMarkerClick); //绑定click事件},function (error) {console.log("🚀 ~ error:", error);//移动端主要位置改变，这里就会一直报错//清除定时器window.navigator.geolocation.clearWatch(timer);},{enableHighAccuracy: true,timeout: 5000,frequence: 1000,maximumAge: 1000,});}
};

进阶之路: 高德地图2.0文档