百度地图API简单实现

密匙是你在百度地图官网申请的，很简单，不需要什么认证，个人即可注册拿到手，几分钟而已。
<!DOCTYPE html>
<html>
<head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Map</title>
        <style type="text/css">
            html {
                height: 100%
            }

            body {
                height: 100%;
                margin: 0px;
                padding: 0px
            }

            #allmap {
                height: 100%
            }
        </style>
<script type="text/javascript" src="**密匙**"></script>
</head>
<body>

        <div id="allmap"></div>
        <div id="r-result">
            <input type="button" onclick="add_control();" value="添加" />
            <input type="button" onclick="delete_control();" value="删除" />
        </div>
        <script type="text/javascript">
            // 百度地图API功能
            var map = new BMap.Map("allmap");

            //创建Map实例,初始化地图坐标点和地图级别
            map.centerAndZoom(new BMap.Point(121.485009, 31.251256), 11);
            //添加地图类型控件 Map.addContorl()
            // 左上角，添加比例尺
            var top_left_control = new BMap.ScaleControl({
                anchor: BMAP_ANCHOR_TOP_LEFT
            });
            //左上角，添加默认缩放平移控件
            var top_left_navigation = new BMap.NavigationControl();
            //右上角，仅包含平移和缩放按钮
            /*缩放控件type有四种类型:
            BMAP_NAVIGATION_CONTROL_SMALL：仅包含平移和缩放按钮；
            BMAP_NAVIGATION_CONTROL_PAN:仅包含平移按钮；
            BMAP_NAVIGATION_CONTROL_ZOOM：仅包含缩放按钮*/
            var top_right_navigation = new BMap.NavigationControl({
                anchor: BMAP_ANCHOR_TOP_RIGHT,
                type: BMAP_NAVIGATION_CONTROL_SMALL
            });
            //添加控件和比例尺
            function add_control() {
                map.addControl(top_left_control);
                map.addControl(top_left_navigation);
                map.addControl(top_right_navigation);
            }
            //移除控件和比例尺
            function delete_control() {
                map.removeControl(top_left_control);
                map.removeControl(top_left_navigation);
                map.removeControl(top_right_navigation);
            }
            map.addControl(new BMap.MapTypeControl({
                mapTypes: [

                    BMAP_NORMAL_MAP,
                    BMAP_HYBRID_MAP
                ]
            }));

            // 设置地图显示的城市 此项是必须设置的
            map.setCurrentCity("上海");
            //开启鼠标滚轮缩放
            map.enableScrollWheelZoom(true);
        </script>

    </body>

</html>
百度地图API简单实现

猜你喜欢
