official_website/static/js/bmap.js

/*
 * @Descripttion : 百度地图
 * @Author       : liuzhifang
 * @Date         : 2022-06-15 08:12:07
 * @LastEditors  : liuzhifang
 * @LastEditTime : 2022-06-15 08:50:17
 */

'use strict';

var bmap = (function () {
    let map = null;
    let mapData = {
        lng: '',
        lat: '',
    };

    /**
     * @description: 初始化地图
     * @param {*}
     * @return {*}
     * @Date: 2021-09-15 14:00:07
     */
    function init(ak) {
        window.onload = _appendBmapJs(ak);
    }

    /**
     * @description: 重置数据
     * @param {*}
     * @return {*}
     * @Date: 2021-09-15 15:27:17
     */
    function _restMapData() {
        // 清空经纬度
        mapData.lng = '';
        mapData.lat = '';
    }

    /**
     * @description: 向 html 中添加百度地图 sdk (ak: n255HlgxO7hR9TClb3skfwcpl7oUGMri)
     * @param {*}
     * @return {*}
     * @Date: 2021-09-15 14:00:41
     */
    function _appendBmapJs(ak) {
        const src = `https://api.map.baidu.com/api?v=1.0&type=webgl&ak=${ak}&callback=initialize`;
        let head = document.head || document.getElementsByTagName('head')[0];
        let script = document.createElement('script');
        script.type = 'text/javascript';
        script.setAttribute('src', src);
        head.appendChild(script);
    }

    /**
     * @description: 添加地图控件
     * @param {*}
     * @return {*}
     * @Date: 2021-09-15 13:40:46
     */
    function _setOption() {
        // 添加比例尺控件
        let scaleCtrl = new BMapGL.ScaleControl();
        map.addControl(scaleCtrl);
        // 添加缩放控件
        let zoomCtrl = new BMapGL.ZoomControl();
        map.addControl(zoomCtrl);
    }

    /**
     * @description: 开始绘制地图
     * @param {*} lng
     * @param {*} lat
     * @param {*} zoom
     * @return {*}
     * @Date: 2021-09-15 13:40:06
     */
    function drawMap({ lng, lat, zoom }) {
        // 重置数据
        _restMapData();
        // 创建Map实例
        map = new BMapGL.Map('mapForPosition');
        // 初始化地图,设置中心点坐标和地图级别
        map.centerAndZoom(new BMapGL.Point(lng, lat), zoom);
        //开启鼠标滚轮缩放
        map.enableScrollWheelZoom(true);
        // 设置地图旋转角度
        map.setHeading(64.5);
        // 设置地图的倾斜角度
        map.setTilt(73);
        // 设置地图配置
        _setOption();
        // 添加点
        drawMarker(lng, lat);
    }

    /**
     * @description: 添加标注点（允许拖动并获取经纬度）
     * @param {*} lng
     * @param {*} lat
     * @return {*}
     * @Date: 2021-09-15 13:39:14
     */
    function drawMarker(lng, lat) {
        let point = new BMapGL.Point(lng, lat);
        // 创建标注, 允许拖拽
        let marker = new BMapGL.Marker(point, {
            enableDragging: true,
        });
        // 将标注添加到地图中
        map.addOverlay(marker);
        // 绑定拖动结束事件，获取经纬度
        marker.addEventListener('dragend', function () {
            let curPoint = marker.getPosition();
            // 保存经纬度
            mapData.lng = curPoint.lng;
            mapData.lat = curPoint.lat;
        });
    }

    /**
     * @description: 通过地址获取经纬度
     * @param {*} seachWord
     * @return {*}
     * @Date: 2021-09-15 13:51:50
     */
    function searchPosition(seachWord) {
        let localSearch = new BMapGL.LocalSearch(map);
        // 允许自动调节窗体大小
        localSearch.enableAutoViewport();
        localSearch.setSearchCompleteCallback(function (searchResult) {
            // 获取搜索结果第一个
            let poi = searchResult.getPoi(0);
            if (poi) {
                // 中心点坐标和地图级别
                map.centerAndZoom(poi.point, 19);
                // 清空原来的标注
                map.clearOverlays();
                // 添加点(搜索结果第一个的经纬度)
                drawMarker(poi.point.lng, poi.point.lat);
                // 保存经纬度
                mapData.lng = poi.point.lng;
                mapData.lat = poi.point.lat;
                // 返回数据
                getData();
            } else {
                foxui.message({
                    type: 'danger',
                    text: '没有找到相应的位置，请重新填写',
                });
            }
        });
        localSearch.search(seachWord);
    }

    /**
     * @description: 返回地图数据
     * @param {*}
     * @return {*}
     * @Date: 2021-09-15 13:50:16
     */
    function getData() {
        return mapData;
    }

    // 初始化
    // _init('n255HlgxO7hR9TClb3skfwcpl7oUGMri');

    return { init, drawMap, drawMarker, searchPosition, getData };
})();