记前端项目定位实现过程
- 背景：
一个前端h5项目，需要内嵌到企业微信工作台上使用，项目中有获取定位信息的要求
- 实现过程：
① 第一次：目标实现方式是调用高德，使用高德地图来获取经纬度，使用获得的经纬度来获取地理位置名称，
具体实现过程如下：
window._AMapSecurityConfig = {securityJsCode: "yourSecretKey",}; const handleGeoLocation = () => {
AMapLoader.load({
key: 'yourkey', // 你的高德地图API Key
version: '2.0', // API 版本
plugins: ['AMap.Geolocation', 'AMap.Geocoder'], // 加载定位和逆地理编码插件
}).then((AMap) => {
// 初始化定位插件
const geolocation = new AMap.Geolocation({
enableHighAccuracy: false, // 是否使用高精度定位
timeout: 20000, // 超时时间
}); // 获取当前位置
geolocation.getCurrentPosition((status, result) => {
if (status === 'complete') {
console.log('定位成功:', result); // 获取经纬度
const lng = result.position.lng; // 经度
const lat = result.position.lat; // 纬度 // 初始化逆地理编码插件
const geocoder = new AMap.Geocoder({
city: '全国', // 城市，默认设置为“全国”
radius: 1000, // 逆地理编码搜索半径
}); // 调用逆地理编码接口
geocoder.getAddress([lng, lat], (status, result) => {
if (status === 'complete' && result.info === 'OK') {
// 逆地理编码成功
console.log('逆地理编码成功:', result.regeocode.formattedAddress);
} else {
// 逆地理编码失败
console.error('逆地理编码失败:', result);
}
});
} else {
console.error('定位失败:', result);
}
});
}).catch((error) => {
console.error('高德地图 API 加载失败:', error);
});
return;
}
问题说明：
这种情况有一个前提条件是项目的运行浏览器不使用谷歌浏览器，谷歌浏览器是国外的浏览器，由于国内网络保护，导致无法获取当前定位，也就是说，在谷歌浏览器上调用getCurrentPosition方法会报错。具体的原因，帖子上有说把协议改为https就可以调用成功的，本人试了一下，没生效，而且还有一点是，高德地图在localhost也就是本地开发的情况下，是不会做协议限制的，由此也可知，调用不通和协议无关，高德地图官网上也阐述了，谷歌浏览器的定位本身就是一个黑洞，不建议使用。至于具体的原因，目前据我所查没有一个帖子有比较明确的答案（有无大佬评论区解释下，多谢）。这里具体的应该要涉及到各个浏览器定位实现的方式，定位实现的方式各有不同的，具体感兴趣的可以查查。
② 第二次：考虑纯后端实现
获取定位失败的原因未可知，就无法根据问题解决，除了换浏览器，但是企业微信工作台的浏览器是不可能改变的，所以考虑纯后端实现
（说到这里就要进行展开，由于企业微信的内核和谷歌浏览器一样，导致我以为问题出现在企业微信工作台浏览器使用谷歌的缘故，但实质上，企业微信工作台上应用无法调通定位接口的原因是，获得地理位置等信息都属于私人信息，出于安全考虑，内嵌浏览器会禁用所有的敏感信息的获取，所以在没有授权允许的情况下，是无法获得定位的）
纯后端实现是不可能的，后端只能通过解析ip地址来获取的一个大概的信息，地址也就精确到城市，市面上所有的定位都是前端实现的，当然有这种想法也是由于上述的那个说法，都是泪
③ 最后一次：一个正确的实现方案
针对此类型的开发，对于内嵌到企业微信或者钉钉的应用，获取地理信息位置，在对应的开发者工具里面都有具体的实现，这些具体的实现，开发者工具的官网上都有具体的实现，针对企业微信内嵌应用的实现如下：
// 这里的decodeGeocoder使用的是公司封装的解码包，本质上还是用的高德地图的实现 function getDynamicAddress(lng_lat:any = []) {const geolocation = new Geolocation();try {// 初始化 await geolocation.init();await geolocation.initGeolocation();// 解析地址 await geolocation.initGeocoder();const addressInfo = await geolocation.decodeGeocoder(lng_lat);return {lngLat: lng_lat,address: addressInfo.address,fullInfo: addressInfo.regeocodeInfo,};} catch (error) {console.error("获取地址失败:", error);throw error;} } async function handleGeolocation() {try {// 1. 获取当前页面URL（去除hash部分）const currentPageUrl = window.location.href.split('#')[0];console.log('当前页面URL:', currentPageUrl);// 2. 从后端获取配置信息const res = await request({url: workOrderService.dispatchOrder.queryGeolocation,method: 'GET',params: { url: currentPageUrl },});if (!res?.success || !res?.data) {console.error('获取配置失败:', res);return;}// 3. 检查wx对象是否存在if (typeof wx === 'undefined') {console.error('企业微信JS-SDK未加载');return;}// 4. 初始化配置 wx.config({beta: true,debug: false, // 生产环境建议关闭appId: res.data.appId, // 使用确定存在的值，避免可选链 timestamp: res.data.timestamp,nonceStr: res.data.nonceStr,signature: res.data.signature,jsApiList: ['getLocation'],});// 5. 配置错误处理wx.error((err) => {console.error('JS-SDK配置失败:', err);// 可以在这里显示错误提示给用户 });// 6. 配置成功后获取位置wx.ready(async () => {try {wx.getLocation({type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'success: async function (res) {let lat = (+res.latitude).toFixed(6);let lng = (+res.longitude).toFixed(6);console.log('res111', res, lat, lng, res.errMsg == "getLocation:ok");if (res.errMsg === "getLocation:ok") {console.log('获取位置成功:', lat, lng);const result =await getDynamicAddress([+lng, +lat]);return result;}}});} catch (error) {console.error('获取位置失败:', error);}});} catch (error) {console.error('处理地理位置出错:', error);}}