<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>接口/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)文章来源：https://www.toymoban.com/news/detail-690001.html
文章来源地址https://www.toymoban.com/news/detail-690001.html
到了这里，关于layui引入百度地图的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
