layui根据经纬度在弹出层中显示具体位置

2024-10-24html教程
152

我们要实现在layui根据经纬度在弹出层中显示具体位置,具体要怎么操作呢?

1、首先你需要引入百度地图的js,这个ak我们去百度地图开发者平台申请,一定要申请浏览器版的ak.
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=你的ak"></script>
2、在layui中的具体代码如下:

注意:这里要提示一点content中内容里的div一定要给一个宽高,不然地图是加载不出来的
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根据经纬度在弹出层中显示具体位置,具体要怎么操作呢? 1、首先你需要引入百度地图的js,这个ak我们去百度地图开发者平台申请,一定要申请浏览器版的ak. script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0ak=你的ak...
2024-10-24 html教程
152

layui table筛选列实现记忆功能,刷新不丢失
layui table给前端的table字段很多,一两百个,但是每个人关注的字段不同,有些人会设置这个defaultToolbar中的列字段,但是每次进去页面都得重新设置,很麻烦。 想法是,defaultToolbar的filter这个功能中,用户自定义显示列时保存起来,下次进入页面默认加...
2024-10-21 html教程
119

layui表格渲染templet解析单元格的问题
在解析单元格的时候自定义列为这样: {field: 'tpye', title: '所属类别', align:"center",templet:'#typeBar'} 我们通常这样简单的解析像这样也没什么毛病: script type="text/html" id="typeBar" {{# if(d.tpye == 1){ }} 系统优化 {{# }else if(d.tpye==2...
2024-10-21 html教程
166

让你的HTML5&CSS3网站在老IE中也能正常显示的3种方法
1、htmlshiv.js Remy开发的HTML5shiv工具能利用JavaScript在老式IE里创建main,header,footer等HTML5元素。也就是说使用JavaScript能创建这些本来不存在的HTML5新元素。这是什么原理?你可能花几天也想不明白,但谁在意呢!这个脚本几乎是所有正式网站必用...
2017-04-15 html教程
586

HTML5之Canvas基础绘图教程
HTML5 火的正热,最近有个想法也是要用到HTML的相关功能,所以也要好好学习一把。 好好看了一下Canvas的功能,感觉HTML5在客户端交互的功能性越来越强了,今天看了一下Canvas绘图,下边是几个实例,记下以备后用。 1、使用Canvas绘制直线: !doctype html ht...
2016-09-19 html教程
602

HTML5 respond.js 解决IE6~8的响应式布局问题
响应式布局,理想状态是,对PC/移动各种终端进行响应。媒体查询的支持程度是IE9+以及其他现代的浏览器,但是IE8在市场当中仍然占据了比较大量的市场份额,使我们不得不进行IE低端浏览器的考虑。那么如何在IE6~8浏览器中兼容响应式布局呢?这里我们需要借助这...
2016-09-19 html教程
848