目的:页面上插入地图API,能够显示需要显示的位置
1、引入api插件:
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
2、地图显示的位置:
<div class="panel-body" id="allmap" >
</div>
3、引入js代码
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("allmap"); // 创建Map实例
map.centerAndZoom(new BMap.Point(120.19, 30.26), 11); // 初始化地图,设置中心点坐标和地图级别
map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
map.setCurrentCity("浙江"); // 设置地图显示的城市 此项是必须设置的
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
</script>
这样就可以啦
拓展:能够显示位置图标
var map = new BMap.Map("allmap"); // 创建Map实例
map.centerAndZoom(new BMap.Point(result[0].longitude, result[0].latitude), 16); // 初始化地图,设置中心点坐标和地图级别
map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
//map.setCurrentCity("浙江"); // 设置地图显示的城市 此项是必须设置的
var myIcon = new BMap.Icon("${context.ctx!}/resource/img/markers.png", new BMap.Size(23, 25), {
// 指定定位位置
offset: new BMap.Size(10, 25),
// 当需要从一幅较大的图片中截取某部分作为标注图标时,需要指定大图的偏移位置
imageOffset: new BMap.Size(0, 0 - 11 * 25) // 设置图片偏移
});
var point = new BMap.Point(result[0].longitude, result[0].latitude);
// 创建标注对象并添加到地图
var marker = new BMap.Marker(point,{icon: myIcon});
map.addOverlay(marker);
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
位置图标的图片 效果图