首页 > 代码库 > 百度地图API

百度地图API

2024-08-22 09:57:23   228人阅读

有空就去看了下百度地图API，特此记录：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <title></title>
        <!-- 在下面填上申请的密钥 -->
        <script src="http://api.map.baidu.com/api?v=2.0&ak=hFuGLqDM88PsfZ6kGnmKWwE9gjtarvRT" type="text/javascript"></script>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            
            html,
            body,
            #container {
                height: 100%;
            }
        </style>
    </head>

    <body>
        <div id="container"></div>

        <script type="text/javascript">
            var map = new BMap.Map(‘container‘), //创建地图实例
                point = new BMap.Point(113.31748, 23.101816); //创建点坐标
            map.centerAndZoom(point, 15); //初始化地图，设置中心点坐标和地图级别
            map.enableScrollWheelZoom();//调用此方法设置为可通过滚轮调整地图大小
            var marker = new BMap.Marker(point); // 创建标注
            //添加控件
            map.addControl(new BMap.NavigationControl()); //地图平移缩放控件
            map.addControl(new BMap.ScaleControl()); //比例尺控件
            map.addControl(new BMap.OverviewMapControl()); //缩略地图控件
            map.addControl(new BMap.MapTypeControl()); //地图类型控件
            marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画

            map.setCurrentCity("广州");
            var label = new BMap.Label("海珠", {
                offset: new BMap.Size(-3, -40)
            }); //标注标签
            marker.setLabel(label) //设置标注说明
            marker.enableDragging(); //标注可以拖动的
        </script>
    </body>

</html>

具体参数请看：http://developer.baidu.com/map/reference/index.php

百度地图API


联系
我们