js引入
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=5GvAQvq8wloZc5KcDoL8a4z5"></script>
样式给<div>
<div class="map-wrap">
<div id="allmap" class="map-box">
<script type="text/javascript">
var map = new BMap.Map('allmap');
map.centerAndZoom(new BMap.Point(115,
60), 14);
map.setCurrentCity("郑州");
map.addControl(new BMap.NavigationControl()); // 添加平移缩放控件
map.addControl(new BMap.ScaleControl()); // 添加比例尺控件
map.addControl(new BMap.OverviewMapControl()); // 添加缩略地图控件
// map.enableScrollWheelZoom(); // 启用滚轮放大缩小
map.disable3DBuilding();
var styleJson = [ {
"featureType" : "highway",
"elementType" : "labels.text.fill",
"stylers" : {
"color" : "#374a46"
}
}, {
"featureType" : "road",
"elementType" : "geometry.fill",
"stylers" : {
"color" : "#8c99f8ff",
"visibility" : "on"
}
}, {
"featureType" : "local",
"elementType" : "geometry.fill",
"stylers" : {
"color" : "#cad0f9ff"
}
}, {
"featureType" : "land",
"elementType" : "geometry.fill",
"stylers" : {
"color" : "#d5d8f9ff",
"visibility" : "on"
}
}, {
"featureType" : "medicallabel",
"elementType" : "geometry.fill",
"stylers" : {
"visibility" : "off"
}
}, {
"featureType" : "building",
"elementType" : "all",
"stylers" : {
"visibility" : "off"
}
}, {
"featureType" : "scenicspots",
"elementType" : "all",
"stylers" : {
"visibility" : "off"
}
}, {
"featureType" : "medical",
"elementType" : "all",
"stylers" : {
"visibility" : "off"
}
}, {
"featureType" : "education",
"elementType" : "all",
"stylers" : {
"visibility" : "off"
}
}, {
"featureType" : "educationlabel",
"elementType" : "all",
"stylers" : {
"visibility" : "off"
}
}, {
"featureType" : "scenicspotslabel",
"elementType" : "all",
"stylers" : {
"visibility" : "off"
}
}, {
"featureType" : "manmade",
"elementType" : "all",
"stylers" : {
"visibility" : "off"
}
}, {
"featureType" : "poilabel",
"elementType" : "all",
"stylers" : {
"visibility" : "off"
}
} ]
map.setMapStyle({
styleJson : styleJson
});
var point = new BMap.Point(115, 60);//经纬
map.centerAndZoom(point, 15);
var marker = new BMap.Marker(point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
marker.setAnimation(BMAP_ANIMATION_BOUNCE); // 跳动的动画
</script>
</div>
</div>