layui引入百度地图

javascript 复制代码
<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=你的ak"></script>
<script src="https://code.bdstatic.com/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script src="layui/layui.js"></script>
<body>

<div class="layui-fluid">
    <!--地图显示位置-->
    <div class="layui-row">
        <div id="l-map" style="height: 810px;width: 1666px"></div>
    </div>
</div>
<script>
    // 百度地图API功能
    var map = new BMapGL.Map("l-map");
    map.centerAndZoom(new BMapGL.Point(119.506999,39.90779), 13);
    map.enableScrollWheelZoom(true);

    $.ajax({
        url: "/admin/ceshi/map_ceshi",
        type: 'get',
        dataType: 'json',
        success: function (adds) {
            for(var i = 0; i<adds.length; i++){
                var point = new BMapGL.Point(adds[i].lng, adds[i].lat);
                var marker = new BMapGL.Marker(point);
                map.addOverlay(marker);
                marker.setLabel(new BMapGL.Label(adds[i].name,{offset:new BMapGL.Size(10,-10)}));
            }
        },
    });
</script>
</body>
javascript 复制代码
接口/admin/ceshi/map_ceshi
adds读出的数据格式为数组:
[
    {
        "id": 1,
        "name": "35624便利店",
        "lng": "119.63569",
        "lat": "39.945388"
    },
    {
        "id": 2,
        "name": "利群超市",
        "lng": "119.548496",
        "lat": "39.933055"
    }
]

获取AK是需要注册一个百度地图开放平台账号,链接地址:

百度地图开放平台 | 百度地图API SDK | 地图开发 (baidu.com)

相关推荐
哆啦A梦15888 分钟前
[前台小程序] 01 项目初始化
前端·vue.js·uni-app
小周同学@3 小时前
谈谈对this的理解
开发语言·前端·javascript
Wiktok3 小时前
Pyside6加载本地html文件并实现与Javascript进行通信
前端·javascript·html·pyside6
一只小风华~3 小时前
Vue:条件渲染 (Conditional Rendering)
前端·javascript·vue.js·typescript·前端框架
柯南二号3 小时前
【大前端】前端生成二维码
前端·二维码
程序员码歌3 小时前
明年35岁了,如何破局?说说心里话
android·前端·后端
博客zhu虎康4 小时前
React Hooks 报错?一招解决useState问题
前端·javascript·react.js
灰海4 小时前
vue中通过heatmap.js实现热力图(多个热力点)热区展示(带鼠标移入弹窗)
前端·javascript·vue.js·heatmap·heatmapjs
王源骏5 小时前
LayaAir鼠标(手指)控制相机旋转,限制角度
前端
大虾写代码5 小时前
vue3+TS项目配置Eslint+prettier+husky语法校验
前端·vue·eslint