HTML--百度地图API

百度地图API2.0需要申请AK

javascript引用百度地图API

设置地图DIV样式

javascript设置地图DIV

如下图代码:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <style type="text/css">

        body, html, #map_canvas {           /*地图css*/
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            font-family: "微软雅黑";
        }                                   /*地图css*/
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=B7b8fe52c47510af6d68c1734345779e"></script>
    <title>百度地图</title>
</head>
<body>
    <div id="map_canvas"></div>                 <!--地图DIV-->
</body>
</html>
<script type="text/javascript">
    var deviceSN;                                   //设备SN
    var map = new BMap.Map("map_canvas");        // 百度地图API功能
    map.centerAndZoom("烟台市", 14);                // 设置地图显示的城市和地图级别
    map.enableScrollWheelZoom();                    // 启用滚轮放大缩小,默认禁用
    map.enableContinuousZoom();                        // 启用地图惯性拖拽,默认禁用
    map.addControl(new BMap.NavigationControl());    // 添加默认缩放平移控件
    map.addControl(new BMap.ScaleControl());        // 添加比例尺控件
    map.addControl(new BMap.MapTypeControl());        // 添加地图类型控件
    map.addControl(new BMap.OverviewMapControl());    // 添加缩略地图控件
</script>

 

你可能感兴趣的:(html)