layui引入百度地图


<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; ilength; 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>


接口/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)

相关阅读:
JavaScript知识系列（4）每天10个小知识点
基础的SpringMvc开发
独处是一种修行
单⽚机常⽤的⼏种通信协议
docker学习笔记
Object.values()以及Object.keys()的用法。
拼多多上货API：自动化上架商品批量获取商品详情信息
【MYSQ精炼系列篇】【MySQL使用】
HDLbits: ps2data
Vue 3.0 中重置 reactive 定义的响应式对象数据，恢复为初始值

原文地址：https://blog.csdn.net/hdxyzlh_0225/article/details/132626524