很简单,在<body>中加入以下代码:
<!--引用百度地图JavaScript API,当前API版本1.4。--> <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script> <!--地图容器。必须指定其宽度和高度,否则地图无法显示。--> <div id="allmap" style="width: 600px; height: 400px;"></div> <!--创建地图,并在地图上标出一个地点--> <script type="text/javascript"> var map = new BMap.Map("allmap"); // 创建Map实例,allmap是地图容器的id var point = new BMap.Point(116.404, 39.915); // 指定地图上的某个坐标 var marker = new BMap.Marker(point); // 创建标注。可在地图上标出某个位置。 map.addOverlay(marker); // 将标注添加到地图中 marker.setAnimation(BMAP_ANIMATION_BOUNCE); // 让标注动起来 map.setCurrentCity("北京"); // 设置地图所在城市。必需,要与地图初始化坐标相对应 map.centerAndZoom(point, 18); // 初始化地图,设置中心点坐标和地图缩放级别 map.addControl(new BMap.NavigationControl()); // 添加平移缩放控件 map.addControl(new BMap.ScaleControl()); // 添加比例尺控件 map.addControl(new BMap.OverviewMapControl()); // 添加缩略地图控件 map.enableScrollWheelZoom(); // 启用滚轮放大缩小 map.addControl(new BMap.MapTypeControl()); // 添加地图类型控件 /* 获取鼠标点击处的坐标值,对显示地图来说非必需 */ function showInfo(e){ alert(e.point.lng + ", " + e.point.lat); } // 显示坐标值 map.addEventListener("click", showInfo); //当点击时显示坐标值 </script>
Visits: 323