码迷,mamicode.com
首页 > Windows程序 > 详细

百度地图API

时间:2016-11-22 02:40:36      阅读:261      评论:0      收藏:0      [点我收藏+]

标签:containe   amp   port   enabled   doc   index.php   blog   label   padding   

有空就去看了下百度地图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

标签:containe   amp   port   enabled   doc   index.php   blog   label   padding   

原文地址:http://www.cnblogs.com/11lang/p/6087578.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!