一 网址
二 专项
1. 我发现使用相同的经纬度放在百度地图和高德地图的官网网站上查询地址不一样，需要相互装换。
bMapTransQQMap(lng, lat) {
let x_pi = 3.14159265358979324 * 3000.0 / 180.0;
let x = lng - 0.0065;
let y = lat - 0.006;
let z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi);
let theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi);
let lngs = z * Math.cos(theta);
let lats = z * Math.sin(theta);
return {
lng: lngs,
lat: lats
}
}
qqMapTransBMap(lng, lat) {
let x_pi = 3.14159265358979324 * 3000.0 / 180.0;
let x = lng;
let y = lat;
let z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * x_pi);
let theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * x_pi);
let lngs = z * Math.cos(theta) + 0.0065;
let lats = z * Math.sin(theta) + 0.006;
return {
lng: lngs,
lat: lats
}
}
2. 百度地图获取当前定位经纬度
- new BMapGL.Geolocation()只能获取到市政府的位置，具体原因不知道。。。
const geolocation = new BMapGL.Geolocation(); // 获取当前位置
// 开启SDK辅助定位
// geolocation.enableSDKLocation();
geolocation.getCurrentPosition((r) => {
// window.alert(JSON.stringify(r));
if (geolocation.getStatus() === window.BMAP_STATUS_SUCCESS) {
const point = new BMapGL.Point(r.point.lng, r.point.lat); // 创建坐标
const Mark = new BMapGL.Marker(point); // 初始化终点标记
this.mapRef.current.addOverlay(Mark); // 在地图上添加点标记
});
3. 通过经纬度获取地址地名
const gc = new BMapGL.Geocoder();
gc.getLocation(endPoint, (rs) => {
const addComp = rs.addressComponents;
console.log(addComp);
// {"streetNumber":"xxx号","street":"xxx路","district":"xxx区","city":"xxx市","province":"xx省"}
});
4. H5 唤起百度地图高德地图
export const gaodeMapApp = () => {
// mode: car 驾车, bus 公交, ride 骑车, walk 步行
if (isIOS) {
// 这个是ios操作系统
window.location.href = `iosamap://viewMap?sourceApplication=appname&poiname=${地址名}&lat=${纬度}&lon=${经度}&dev=0`;
if (!mcBizApp.isPajkApp()) {
const d = new Date();
const t0 = d.getTime();
// 由于打开需要1～2秒，利用这个时间差来处理－－打开app后，返回h5页面会出现页面变成app下载页面，影响用户体验
const delay = setInterval(() => {
const d1 = new Date();
const t1 = d1.getTime();
if (t1 - t0 < 3000 && t1 - t0 > 2000) {
window.location.href = `https://uri.amap.com/navigation?from=${起点纬度},${起点经度},${起点名}&to=${终点纬度},${终点经度},${终点名}&mode=${公交方式}&callnative=1&coordinate=wgs84&src=mypage`;
}
if (t1 - t0 >= 3000) {
clearInterval(delay);
}
}, 1000);
}
} else {
// 这个是安卓操作系统
window.location.href = `androidamap://viewMap?sourceApplication=appname&poiname=${终点名}&lat=${终点纬度}&lon=${终点经度}&dev=0&&coord_type=bd09ll`;
const d = new Date();
const t0 = d.getTime();
// 由于打开需要1～2秒，利用这个时间差来处理－－打开app后，返回h5页面会出现页面变成app下载页面，影响用户体验
const delay = setInterval(() => {
const d2 = new Date();
const t1 = d2.getTime();
if (t1 - t0 < 3000 && t1 - t0 > 2000) {
window.location.href = `https://uri.amap.com/navigation?from=${起点纬度},${起点经度},${起点名}&to=${终点纬度},${终点经度},${终点名}&mode=${公交方式}&callnative=1&coordinate=wgs84&src=mypage`;
console.log('delay -> window.location.href', window.location.href);
}
if (t1 - t0 >= 3000) {
clearInterval(delay);
}
}, 1000);
}
};
export const baiduMapApp = () => {
// mode: driving 驾车, transit 公交, 和riding 骑车, walking 步行
if (startLat && startLon) {
let scheme = '';
const queryStr = `?origin=name:地点名（我的位置）|latlng:${起点纬度},${起点经度}&destination=${终点纬度},${终点经度}®ion=上海&coord_type=bd09ll&mode=${交通方式}`;
if (isIOS()) {
// ios 端
scheme = `bdapp://map/direction${queryStr}`;
} else {
// android 端
scheme = `baidumap://map/direction${queryStr}`;
}
window.location.href = scheme;
const startTime = Date.now();
let count = 0;
let endTime = 0;
const t = setInterval(() => {
count += 1;
endTime = Date.now() - startTime;
if (endTime > 800) {
clearInterval(t);
}
if (count < 30) return;
if (!(document.hidden || document.webkitHidden)) {
window.location.href = `http://api.map.baidu.com/direction${queryStr}&output=html`;
}
}, 20);
window.onblur = () => {
clearInterval(t);
};
} else {
console.log('获取不到定位，请检查手机定位设置');
}
};
五. 搜索关键词获取地址列表
function () {
const searchComplete = (results) => {
console.log(results)
};
const local = new BMapGL.LocalSearch(this.mapRef.current, {
renderOptions: {
},
onSearchComplete: searchComplete,
});
local.search(searchInputStart);
}
六. 点击齿轮定位回到当前位置
const startPoint = new BMapGL.Point(起点纬度, 起点经度);
this.mapRef.current.centerAndZoom(startPoint, 15);
const point = new BMapGL.Point(起点纬度, 起点经度); // 创建点坐标A
const startMark = new BMapGL.Marker(point); // 初始化起点标记
this.mapRef.current.addOverlay(startMark); // 在地图上添加点起点标记
七. 清除地图上的覆盖物（切换路线用到）
this.mapRef.current.clearOverlays();
八. 获取两点距离
getLineDistance = () => {
const pointA = new BMapGL.Point(终点纬度, 终点经度); // 创建点坐标A
const pointB = new BMapGL.Point(起点纬度, 起点经度); // 创建点坐标B
const startMarkA = new BMapGL.Marker(pointA); // 初始化起点标记
const startMarkB = new BMapGL.Marker(pointB); // 初始化终点标记
this.mapRef.current.addOverlay(startMarkA); // 在地图上添加点起点标记
this.mapRef.current.addOverlay(startMarkB); // 在地图上添加点终点标记
console.log(this.mapRef.current.getDistance(pointA, pointB));
}
九. 格式化时间地点
export const getDistance = (distance, isObj = false) => {
if (distance < 1000) {
if (isObj) {
return [{
data: distance,
unit: 'm',
}];
}
return `${distance}m`;
} if (distance > 1000) {
if (isObj) {
return [
{
data: (Math.round(distance / 100) / 10).toFixed(1),
unit: 'km',
},
];
}
return `${(Math.round(distance / 100) / 10).toFixed(1)}km`;
}
};
export const getDuration = (duration, isObj = false) => {
const days = parseInt((duration * 1000) / (1000 * 60 * 60 * 24), 10);
const hours = parseInt(((duration * 1000) % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60), 10);
const minutes = parseInt(((duration * 1000) % (1000 * 60 * 60)) / (1000 * 60), 10);
let str = '';
const arr = [];
if (days) {
str += `${days}天`;
arr.push({
data: days,
unit: '天',
});
}
if (hours) {
str += `${hours}小时`;
arr.push({
data: hours,
unit: '小时',
});
}
if (minutes) {
str += `${minutes}分钟`;
arr.push({
data: minutes,
unit: '分钟',
});
}
if (isObj) {
return arr.length ? arr : [{
data: 1,
unit: '分钟',
}];
}
return str || '1分钟';
};
十. 交通方式
drive = () => {
this.mapRef.current.clearOverlays(); // 清除覆盖物
const endPoint = new BMapGL.Point(终点纬度, 终点经度);
const startPoint = new BMapGL.Point(起点纬度, 起点经度);
this.mapRef.current.centerAndZoom(startPoint, 12);
const searchComplete = (results) => {
if (!results._distance) {
console.log('我没有路线推荐')
}
if (driveRoute.getStatus() !== window.BMAP_STATUS_SUCCESS) {
return;
}
const plan = results.getPlan(0);
console.log(plan)
const duration = `${plan._duration}`;
const distance = `${plan._distance}`;
};
const driveRoute = new BMapGL.DrivingRoute(this.mapRef.current, {
renderOptions: { map: this.mapRef.current, autoViewport: true },
onSearchComplete: searchComplete,
}); // 获取路径信息
driveRoute.search(startPoint, endPoint); // 绘制路径
}
- 公交
- 公交返回数据之后自定义设计图，点击对应的交通路线，未找到方法重新绘制公交路线，才用切换策略取第一条路线。
bus = (tipId, isSearch = false) => {
this.mapRef.current.clearOverlays(); // 清除覆盖物
const endPoint = new BMapGL.Point(终点纬度, 终点经度);
const startPoint = new BMapGL.Point(起点纬度, 起点经度);
this.mapRef.current.centerAndZoom(startPoint, 12);
const tempArr = [];
// '时间最少 换乘最少 步行最少'.split(' ');
// 'BMAP_TRANSIT_POLICY_RECOMMEND BMAP_TRANSIT_POLICY_LEAST_TRANSFER BMAP_TRANSIT_POLICY_LEAST_WALKING'.split(' ');
let tempData;
const busRoute = new BMapGL.TransitRoute(this.mapRef.current, {
renderOptions: {
map: this.mapRef.current,
// panel: 'result',
// selectFirstResult: false,
autoViewport: true,
},
policy: BMAP_TRANSIT_POLICY_LEAST_WALKING,
onSearchComplete: (result) => {
if (!result._plans) {
console.log('无推荐路线')
return;
}
// 路线成功后才继续获取
if (busRoute.getStatus() === BMAP_STATUS_SUCCESS) {
console.log(result)
}
},
});
if (isSearch) {
busRoute.setPolicy(window[tipId]);
busRoute.search(startPoint, endPoint);
return;
}
busRoute.setPolicy(BMAP_TRANSIT_POLICY_LEAST_WALKING); // 改变策略
busRoute.search(startPoint, endPoint);
}
bike = () => {
this.mapRef.current.clearOverlays(); // 清除覆盖物
const endPoint = new BMapGL.Point(终点纬度, 终点经度);
const startPoint = new BMapGL.Point(起点纬度, 起点经度);
this.mapRef.current.centerAndZoom(startPoint, 12);
const searchComplete = (results) => {
if (!results._distance) {
console.log(没有路线)
}
if (bikeRoute.getStatus() !== window.BMAP_STATUS_SUCCESS) {
return;
}
const plan = results.getPlan(0);
const duration = `${plan._duration}`;
const distance = `${plan._distance}`;
};
const bikeRoute = new BMapGL.RidingRoute(this.mapRef.current, {
renderOptions: { map: this.mapRef.current, autoViewport: true },
onSearchComplete: searchComplete,
}); // 获取路径信息
bikeRoute.search(startPoint, endPoint); // 绘制路径
}
walk = () => {
this.mapRef.current.clearOverlays(); // 清除覆盖物
const endPoint = new BMapGL.Point(终点纬度, 终点经度);
const startPoint = new BMapGL.Point(起点纬度, 起点经度);
this.mapRef.current.centerAndZoom(startPoint, 12);
const searchComplete = (results) => {
if (!results._distance) {
console.log(没有路线)
}
if (walkRoute.getStatus() !== window.BMAP_STATUS_SUCCESS) {
return;
}
const plan = results.getPlan(0);
const duration = `${plan._duration}`;
const distance = `${plan._distance}`;
this.setState({
duration, // 获取时间
distance, // 获取距离
});
};
const walkRoute = new BMapGL.WalkingRoute(this.mapRef.current, {
renderOptions: { map: this.mapRef.current, autoViewport: true },
onSearchComplete: searchComplete,
}); // 获取路径信息
walkRoute.search(startPoint, endPoint); // 绘制路径
}