在网页中嵌入百度地图

很简单,在<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

此条目发表在网站分类目录,贴了标签。将固定链接加入收藏夹。

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

12 + 8 =