您的位置：首页 > Web前端 > CSS

百度地图Api进阶教程-地图鼠标左右键操作实例和鼠标样式6.html

2013-08-15 18:25 393 查看

转载： http://blog.csdn.net/sd0902/article/details/8478435

[html] view
plaincopy

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>百度地图</title>





<script type="text/javascript">

    var iscreatr=false;

    function initialize() {

        //---------------------------------------------基础示例---------------------------------------------

        var map = new BMap.Map("allmap",{minZoom:12,maxZoom:20});            // 创建Map实例

        //map.centerAndZoom(new BMap.Point(116.4035,39.915),15);  //初始化时，即可设置中心点和地图缩放级别。

        map.centerAndZoom("成都",13);                     // 初始化地图,设置中心点坐标和地图级别。

        map.enableScrollWheelZoom(true);//鼠标滑动轮子可以滚动





        //---------------------------------------------鼠标右键（放大，缩小）操作---------------------------------------------

        var menu = new BMap.ContextMenu(); //右键菜单

        var txtMenuItem = [  //右键菜单项目

            {

                text:'放大',

                callback:function(){map.zoomIn()}

            },

            {

                text:'缩小',

                callback:function(){map.zoomOut()}

            },

            {

                text:'放置到最大级',

                callback:function(){map.setZoom(18)}

            },

            {

                text:'查看全国',

                callback:function(){map.setZoom(4)}

            },

            {

                text:'在此添加标注',

                callback:function(p){

                var marker = new BMap.Marker(p), px = map.pointToPixel(p);

                    map.addOverlay(marker);

                }

            }

        ];





        for(var i=0; i < txtMenuItem.length; i++){

            menu.addItem(new BMap.MenuItem(txtMenuItem[i].text,txtMenuItem[i].callback,100)); //菜单添加项目

            if(i==1 || i==3) {

                menu.addSeparator();  //添加右键菜单的分割线

            }

        }



        map.addContextMenu(menu);



        //---------------------------------------------改变鼠标样式---------------------------------------------

        //需要自己制作。cur格式的静态光标

        //map.setDefaultCursor("url('01.cur')");        //设置地图默认的鼠标指针样式

        //map.setDraggingCursor("url('03.cur')");         //设置地图拖拽时的鼠标指针样式

    }



    function loadScript() {

       var script = document.createElement("script");

       script.src = "http://api.map.baidu.com/api?v=1.4&callback=initialize";

       document.body.appendChild(script);

    }



    window.onload = loadScript;

</script>





</head>

<body>

    <div id="r-result" style="float:left;width:100px;">打印坐标</div>

    <div id="allmap" style="width: 800px; height: 500px"></div>

</body>

</html>



<script type="text/javascript">

    // 移动到某点 map.panTo(new BMap.Point(116.409, 39.918));

     // map.setZoom(14);   //放到到14级

</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航