1、引入外部文件
<script src="http://api.map.baidu.com/api?v=1.1&services=true" type="text/javascript"></script>
<script src="http://api.map.baidu.com/getscript?v=1.1&ak=&services=true&t=20130716024057" type="text/javascript"></script>
<link href="http://api.map.baidu.com/res/11/bmap.css" type="text/css" rel="stylesheet">
2、新建div,且设置高度
#dituContent {
min-height: 350px !important;
}
<div id="dituContent" class="col-sm-12"></div>
3、js代码
var map = new BMap.Map("dituContent");
map.centerAndZoom(new BMap.Point(117.134654,39.227424), 20);
map.addControl(new BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT }));
map.enableScrollWheelZoom(true);
//标注点数组
var markerArr = [{ title: "北辰大厦", content: "北辰大厦", point: "117.134654|39.227424", isOpen: 1, icon: { w: 21, h: 21, l: 0, t: 0, x: 6, lb: 5 } }
];
//创建marker
for (var i = 0; i < markerArr.length; i++) {
var json = markerArr[i];
var p0 = json.point.split("|")[0];
var p1 = json.point.split("|")[1];
var point = new BMap.Point(p0, p1);
var iconImg = createIcon(json.icon);
var marker = new BMap.Marker(point, { icon: iconImg });
//var label = new BMap.Label(json.title, { "offset": new BMap.Size(json.icon.lb - json.icon.x + 10, -20) });
//marker.setLabel(label);
map.addOverlay(marker);
//label.setStyle({
// borderColor: "#808080",
// color: "#333",
// cursor: "pointer"
//});
}
//创建一个Icon
function createIcon(json) {
var icon = new BMap.Icon("http://app.baidu.com/map/images/us_mk_icon.png", new BMap.Size(json.w, json.h), { imageOffset: new BMap.Size(-json.l, -json.t), infoWindowOffset: new BMap.Size(json.lb + 5, 1), offset: new BMap.Size(json.x, json.h) })
return icon;
}