5分钟开发一个导航应用

2. 定位接入

Geolocation

navigator.geolocation.watchPosition(
	(suc) => {
		const { longitude: x, latitude: y, speed, accuracy } = suc.coords;
		const coord = lonLat2WebMercator({ x, y });
		let current: Coordinate = {type: "GPS",level: this.level,speed,accuracy,...coord};
	},
	(error) => {
		console.log('gps error------', e.code);
	},
	{
		timeout: 10000,//设备位置获取操作的超时时间
		maximumAge: 0,//设定位置缓存时间
		enableHighAccuracy: true,// 是否使用高精度设备
	}
    );

3. 坐标转换

/**
 * wgs84坐标转Web墨卡托
 * @param GPS 经纬度 wgs84坐标系
 * @returns 地图坐标 web墨卡托坐标
 */
export function lonLat2WebMercator(GPS) {
  	let { x: longitude, y: latitude } = GPS;
  	const R = 6378137; // 地球半径，单位：米
	// 将GPS坐标（经纬度）转换为地理坐标（弧度）
  	latitude = latitude * Math.PI / 180;
  	longitude = longitude * Math.PI / 180;
	// 将地理坐标（弧度）转换为Web墨卡托坐标（x, y）
  	const x = R * longitude;
  	const y = R * Math.log(Math.tan((Math.PI / 4) + (latitude / 2)));
 	return { x, y };
}

4. 获取手机方向

window.addEventListener("deviceorientationabsolute",deviceorientationabsolute);
private deviceorientationabsolute = (event: any) => {
    	const angle = event.webkitCompassHeading? event.webkitCompassHeading: 360 - event.alpha;  
	this.updateAngle(-angle);
}