加载百度地图并设置中心点
注意:
1、百度地图设置中心点,要等地图加载完,否则定位不准
2、百度地图的经纬度,是百度坐标系的。如果结果返回墨卡托的,需要2次转换(墨卡托转GPS, GPS转百度坐标系)
墨卡托转GPS方法(参数是number类型)
static webMercatortoGPS(lng, lat) {
lng = (lng / 20037508.34) * 180;
lat = (lat / 20037508.34) * 180;
lat =
(180 / Math.PI) *
(2 * Math.atan(Math.exp((lat * Math.PI) / 180)) -
Math.PI / 2);
return { lng, lat };
}
GPS转百度坐标系方法(参数是number类型)
static GPSToBaidu(lng, lat) {
const x_PI = Math.PI * 3000.0 / 180.0;
const z = Math.sqrt(lng * lng + lat * lat) + 0.00002 * Math.sin(lat * x_PI);
const theta = Math.atan2(lat, lng) + 0.000003 * Math.cos(lng * x_PI);
lng = z * Math.cos(theta) + 0.0065;
lat = z * Math.sin(theta) + 0.006;
return {lng, lat};
}
GPS=>墨卡托坐标
static GPSToWebMercator(lng, lat) {
lng = Number(lng)
lat = Number(lat)
if (Math.abs(lng) > 180 || Math.abs(lat) > 90) {
Toast("无效的经纬度坐标!");
}
const pi = 3.14159265358979324;
lng = lng * 20037508.342789 / 180;
lat = Math.log(Math.tan((90 + lat) * pi / 360)) / (pi / 180);
lat = lat * 20037508.34789 / 180;
return { lng, lat };
}
html中
<div id="map-content"></div>
js中
// 地图定位
const initMap = (lng, lat) => {
var map = new BMap.Map("map-content"); // 创建地图实例
var point = new BMap.Point(lng, lat); // 创建点坐标
setTimeout(() => { // 定时器是为了地图加载完
map.centerAndZoom(point, 15); // 设置中心点坐标和放大倍数
}, 1000);
var marker = new BMap.Marker(point); //标记点
map.addOverlay(marker); // 将标记点添加到地图中
}
onMounted(() => {
initMap(centerPoint.value.lng, centerPoint.value.lat)
});
// 展示地图的div要设置宽度和高度