1.第一种
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的key"></script>
<div style="width:100%;height:100vh;border:#ccc solid 1px;font-size:12px" id="map"></div>
<script type="text/javascript">
var map = new BMap.Map("map", {mapType:BMAP_SATELLITE_MAP});
var point = new BMap.Point(119.305724, 26.092186);
map.centerAndZoom(point, 18);
map.addControl(new BMap.NavigationControl()); //tab 地图卫星切换
map.addControl(new BMap.MapTypeControl()); //tab 地图卫星切换
var marker = new BMap.Marker(point);
map.addOverlay(marker);
</script>
2.第二种
<script type="text/javascript">
//创建和初始化地图函数:
function initMap() {
createMap();//创建地图
setMapEvent();//设置地图事件
addMapControl();//向地图添加控件
addMapOverlay();//向地图添加覆盖物
}
function createMap() {
var map = new BMap.Map("map", { mapType: BMAP_HYBRID_MAP });
map.centerAndZoom(new BMap.Point(107.328895, 33.139306), 15);
// map.addControl(new BMap.MapTypeControl()); //切换模式
map.enableScrollWheelZoom();//启用地图滚轮放大缩小
}
function setMapEvent() {
map.enableDragging();
}
function addClickHandler(target, window) {
target.addEventListener("click", function () {
target.openInfoWindow(window);
});
}
function addMapOverlay() {
var markers = [
{ content: "新四季广场", title: "", imageOffset: { width: -46, height: -21 }, position: { lat: 33.154179, lng: 107.327817 } },
{ content: "博雅新区", title: "", imageOffset: { width: -46, height: -21 }, position: { lat: 33.163609, lng: 107.324439 } },
{ content: "博雅新居", title: "", imageOffset: { width: -46, height: -21 }, position: { lat: 33.164032, lng: 107.324511 } },
{ content: "胜利新村", title: "", imageOffset: { width: -46, height: -21 }, position: { lat: 33.160587, lng: 107.350742 } },
{ content: "三合镇政府", title: "", imageOffset: { width: -46, height: -21 }, position: { lat: 33.139548, lng: 107.362096 } },
{ content: "博望小学", title: "", imageOffset: { width: -46, height: -21 }, position: { lat: 33.175577, lng: 107.301012 } },
{ content: "江湾社区", title: "", imageOffset: { width: -46, height: -21 }, position: { lat: 33.141241, lng: 107.303168 } }
];
for (var index = 0; index < markers.length; index++) {
var point = new BMap.Point(markers[index].position.lng, markers[index].position.lat);
var marker = new BMap.Marker(point, {
icon: new BMap.Icon("http://api.map.baidu.com/lbsapi/createmap/images/icon.png", new BMap.Size(20, 25), {
imageOffset: new BMap.Size(markers[index].imageOffset.width, markers[index].imageOffset.height)
})
});
var label = new BMap.Label(markers[index].title, { offset: new BMap.Size(25, 5) });
var opts = {
width: 200,
title: markers[index].title,
enableMessage: false
};
var infoWindow = new BMap.InfoWindow(markers[index].content, opts);
marker.setLabel(label);
addClickHandler(marker, infoWindow);
map.addOverlay(marker);
};
}
//向地图添加控件
function addMapControl() {
var scaleControl = new BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT });
scaleControl.setUnit(BMAP_UNIT_IMPERIAL);
map.addControl(scaleControl);
var navControl = new BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_LARGE });
map.addControl(navControl);
var overviewControl = new BMap.OverviewMapControl({ anchor: BMAP_ANCHOR_BOTTOM_RIGHT, isOpen: true });
map.addControl(overviewControl);
}
var map;
initMap();
</script>