如何在模态框中插入地图插件

1.遇到的困惑:

在上一个项目,做一个公司考勤功能,需要在后台管理系统中选择公司地点,然后设置半径,在定位半径之内打卡是算在公司内的;

选择公司地址

这时候,点击按钮,是需要弹出alert框,

就像上图,但是在模态框中插入地图当时还没做过,尝试着用之前用的比较顺手的bootbox模态框来装地图,但是修修改改,最终没有成功

2.如何解决的:

在同事的启发下,说bootstrap的模态框也挺好用,所以就去查了下bootstrap模态框的使用,确实很简单明了,可以直接在HTML里面写标签,不用像之前bootbox需要在JS控制器里面写HTML,特难受,每一个都要用‘’包裹起来;

一个静态的模态框窗口实例

上述模态框(modal)的部分是不显示的,里面id="myModal",与data-target是绑定的,点击button后就能弹出模态框,显示模态框部分,十分方便,都不需要在JS中写东西;还有,这个模态框需要在bootstrap插件的引入的前提下来使用;

class=“modal-header”是模态框的头部,里面是标题;接下来的modal-body就是来装主体的,你所要展示的内容;modal-footer就是确定和取消的按钮

3.还有这个百度地图API的使用,准备下次空的再来分享一下,这个也是比较使用的插件,像现在的外卖定位,导航,都需要使用这个插件,但是想调试好用也有点麻烦。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容