百度地图使用

百度地图

1、代码

HTML

<div id="allmap"></div>

引入JS

<script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=3.0&ak=密钥"></script>

JS

    //添加标点
    addMarker=(point,index)=>{
        let myIcon = new BMapGL.Icon("${pageContext.request.contextPath}/resources/plugin/roadmm/images/logo.png",
            new BMapGL.Size(23, 25), {
                offset: new BMapGL.Size(10, 25)
            });
        let marker = new BMapGL.Marker(point, {
            icon: myIcon
        });
        map.addOverlay(marker);
        return marker;
    }

    //添加信息窗口
    addInfoWindow=(marker,data)=> {
        let title = data.partyName;
        let html = [];
        html.push('<table cellspacing="0" style="table-layout:fixed;width:100%;font:12px arial,simsun,sans-serif"><tbody>');
        html.push('<tr>');
        html.push('<td style="vertical-align:top;line-height:16px;width:50px;white-space:nowrap;word-break:keep-all">开工时间:</td>');
        html.push('<td style="vertical-align:top;line-height:16px">' + data.workerTime + ' </td>');
        html.push('</tr>');
        html.push('<tr>');
        html.push('<td style="vertical-align:top;line-height:16px;width:50px;white-space:nowrap;word-break:keep-all">施工内容:</td>');
        html.push('<td style="vertical-align:top;line-height:16px">' + data.workerInfo + ' </td>');
        html.push('</tr>');
        html.push('</tbody></table>');
        let infoWindow = new BMapGL.InfoWindow(html.join(""), {//信息窗口
            title: title,
            width: 250
        });
        let openInfoWinFun = function () {
            marker.openInfoWindow(infoWindow);
        };
        marker.addEventListener("click", openInfoWinFun);//点击事件
        return openInfoWinFun;
    }

    //初始化地图标点
    map_init=(data)=>{
        for (let i = 0; i < data.length; i++) {
            let marker = addMarker(new BMapGL.Point(data[i].lng, data[i].lat),i);
            addInfoWindow(marker,data[i]);
        }
    }

    // 百度地图API功能
    let map = new BMapGL.Map("allmap");
    let point = new BMapGL.Point(106.528707, 29.551456);
    map.centerAndZoom(point, 13);//设置中心点和地图级别
    map.enableScrollWheelZoom(true);//启用滚轮放大缩小

    //接收数据
    let mapList = '${mapList}';
    if(mapList === ''){
        layer.msg('${msg}',{time:500});
    }else{
        map_init(JSON.parse(mapList));
    }

2、效果

3、问题

3.1、BMapGL is not defined

JS引入地址中加入了 https：

3.2、地图中标点图标不显示

适当设置偏移，或者不设置