美文网首页
加载百度地图并设置中心点

加载百度地图并设置中心点

作者: 浅浅_2d5a | 来源:发表于2022-11-12 15:50 被阅读0次

    注意:
    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要设置宽度和高度

    相关文章

      网友评论

          本文标题:加载百度地图并设置中心点

          本文链接:https://www.haomeiwen.com/subject/fcxntdtx.html