在网页中嵌入带标识的百度地图

地图功能:按标尺缩放,鼠标滑动缩放,添加标注和
信息。
具体步骤:
1:首先到百度地图API,申请密钥。(如果没有百度账户得先注册一个)
2:百度地图API的功能做得比较分散,像标注、缩放等都是需要自己一步步找代码的。我把代码整理了一下,给大家复制一下,应该是最简洁的了
<head>
<meta
http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script
type="text/javascript"
src="http://api.map.baidu.com/api?v=1.5&ak=申请的密钥"></script>
</head>
<body>
<div
style="width:500px;height:500px;margin:0 auto"
id="allmap"></div>
<script type="text/javascript">
    var
map = new BMap.Map("allmap");   
    var point = new BMap.Point(116.384,
39.987);  // 需要标注的位置的经纬度 
    map.centerAndZoom(point, 15);  //
中心位置和缩放倍数
    map.enableScrollWheelZoom();   //
添加滚动轴
    map.addControl(new BMap.NavigationControl());   //
添加左上角的标尺工具
    map.addControl(new
BMap.NavigationControl());   
    map.addControl(new
BMap.ScaleControl());   
    map.addControl(new
BMap.OverviewMapControl());   
    map.addControl(new
BMap.MapTypeControl());   
    map.setCurrentCity("北京");
   
    var
opts = {   
         width : 200,     // 信息窗口宽度   
        height:
20,     // 信息窗口高度   
         title : "健翔桥东华亭家园"  //
信息窗口标题  
    }   
    var infoWindow = new BMap.InfoWindow("xxx公司",
opts);  // 创建信息窗口对象   
    map.openInfoWindow(infoWindow,
map.getCenter());      // 打开信息窗口
    var marker = new
BMap.Marker(point);        //
创建标注,即地图上的小红点   
    map.addOverlay(marker);                            
</script>

posted @ 2013-06-20 10:24  ffhy  阅读(271)  评论(0编辑  收藏  举报