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)

相关推荐
stoneship10 分钟前
Web项目减少资源加载失败白屏问题
前端
DaMu39 分钟前
Cesium & Three.js 【移动端手游“户外大逃杀”】 还在“画页面的”前端开发小伙伴们,是时候该“在往前走一走”了!我们必须摆脱“画页面的”标签!
前端·gis
非专业程序员39 分钟前
一文读懂Font文件
前端
Asort41 分钟前
JavaScript 从零开始(七):函数编程入门——从定义到可重用代码的完整指南
前端·javascript
Johnny_FEer42 分钟前
什么是 React 中的远程组件?
前端·react.js
我是日安1 小时前
从零到一打造 Vue3 响应式系统 Day 10 - 为何 Effect 会被指数级触发?
前端·vue.js
知了一笑1 小时前
「AI」网站模版,效果如何?
前端·后端·产品
艾小码1 小时前
用了这么久React,你真的搞懂useEffect了吗?
前端·javascript·react.js
知觉1 小时前
实现@imput支持用户输入最多三位整数,最多一位小数的数值
前端