layui根据百度地图经纬度在弹出层中显示位置

2025-01-09编程教程
240

首先你需要引入百度地图的js
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=你的ak"></script>
ak,注意是要浏览器端的ak,这个直接到百度开发者平台申请。

引入layui,这个大家可以到layui官网看看怎么引入layer,注意:这里要提示一点content中内容里的div一定要给一个宽高,不然地图是加载不出来的
return layer.open({
          type: 1,
          title: false,
          closeBtn: false,
          area: '500px',
          shade: 0.3,
          shadeClose: true,
          content: '<div id="mapContainer"><div id="tmsbaiduMap" style="height: 500px;width: 500px;"></div></div>',
          success: function(layero, index) {
            var map, marker, myIcon, point;
            //创建百度地图实例
            map = new BMap.Map("tmsbaiduMap");
            //定位的经纬度坐标
            point = new BMap.Point(113.943062, 22.54069);
            //将地图中心移动到我们指定的地点,并设置地图等级(就是地图缩放的程度)
            map.centerAndZoom(point, 20);
            //导入位置图标,后面设置的size的参数其实是一个矩形,25和23是宽和高,如果发现自定义的图标只有一部分,那就适量加大一些这2个参数
            myIcon = new BMap.Icon("images/ots/location.png", new BMap.Size(25, 23));
            marker = new BMap.Marker(point, {
              icon: myIcon
            });
            //在我们指定的地点显示位置图标
            map.addOverlay(marker);
            //鼠标滚轮可以缩放地图
            return map.enableScrollWheelZoom(true);
          }
        });
 
The End
layui 百度地图

相关推荐

layui根据百度地图经纬度在弹出层中显示位置
首先你需要引入百度地图的js script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0ak=你的ak"/script ak ,注意是要浏览器端的ak,这个直接到百度开发者平台申请。 引入layui,这个大家可以到layui官网看看怎么引入layer, 注意:这里要提...
2025-01-09 编程教程
240

layui Table 设置title 字体加粗
在layui.css中加样式 : .layui-table th{font-weight: bold;} ,或者直接加在网页中即可。 style .layui-table th{ font-weight: bold;} /stylebodytable id="demo" lay-filter="demo" class="layui-hide"/table/body...
2022-10-17 编程教程
200

ThinkPHP5+Layui实现图片上传加预览
前端文件: label class=layui-form-label图片/labela class=layui-btn id=image style=float: left;i class=layui-icon#xe67c;/i上传图片/adiv class=layui-input-block style=margin-left: 220px; input type=text name=img value={$tptc.img} class=layui...
2018-05-15 编程教程
185

layui文件上传实现代码分享
本文主要为大家详细介绍了layui导航栏效果的实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家。 !DOCTYPE htmlhtml head meta charset=UTF-8 title文件上传/title link rel=stylesheet href=layui/css/layui.css link rel=sty...
2018-05-15 编程教程
201

Layui + php + Smarty 实现分页
页面内容 (分页容器) div class=admin-table-page div id=page class=page/div/div javascript 代码 //调用分页laypage({ cont: page, //分页容器的id pages: {#$maxpage#} //总页数, groups: 5 //连续显示分页数, curr:{#$currentPage#} //当前页数, jump:...
2018-05-03 编程教程
157

PHP结合LAYUI实现前台加后台操作
一:前台加载出前端页面: HTML: lay-data={width:800,height:400, url:data.php, page:true, id:test} js: layui.use(table,function(){var table=layui.table}) 表头加载下就行了主要讲解下对接数据库和返回对象的操作。 二:先连接数据库 header(Conten...
2018-05-03 编程教程
124