zoukankan      html  css  js  c++  java
  • 百度地图Api进阶教程-地图鼠标左右键操作实例和鼠标样式6.html

    <!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>14.1</title>
        <script type="text/javascript">
            function initialize() {
                var map = new BMap.Map("container", { minZoom: 12, maxZoom: 25 });
                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 style="float: left;  100px;">
            1</div>
        <div id="container" style=" 800px; height: 500px">
        </div>
        <div id="r-result" style="float: left;  100px;">
            打印坐标</div>
        <div id="result">
        </div>
    </body>
    </html>
  • 相关阅读:
    访问双工服务
    为 Silverlight 客户端生成双工服务
    RMAN创建辅助实例(副本数据库)
    js获取对话框返回值
    在ascx中使用js找不到对象问题解决
    css滑动门技术[摘自网络]
    非禁用validateRequest=false使用Page_Error()错误处理[摘自网络]
    PreviousPage跨页面传值
    jQuery Ajax 方法调用 Asp.Net WebService 的详细例子[转]
    动态的创建客户端控件[收藏网络]
  • 原文地址:https://www.cnblogs.com/gengaixue/p/4117186.html
Copyright © 2011-2022 走看看