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);
}
});
本站部分内容来源互联网,如果有图片或者内容侵犯了您的权益,请联系我们,我们会在确认后第一时间进行删除!