<!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; width: 100px;">

        1</div>

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

    </div>

    <div id="r-result" style="float: left; width: 100px;">

        打印坐标</div>

    <div id="result">

    </div>

</body>

</html>

百度地图Api进阶教程-地图鼠标左右键操作实例和鼠标样式6.html的更多相关文章

  1. 百度地图Api进阶教程-点击生成和拖动标注4.html

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  2. 百度地图Api进阶教程-实例高级操作8.html

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  3. 百度地图Api进阶教程-基础地图示例1.html

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  4. 百度地图Api进阶教程-用户自定义数据(标记和搜索)7.html

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  5. 百度地图Api进阶教程-弹出信息窗口5.html

    <!DOCTYPE html> <html> <head> <meta name="viewport" content="ini ...

  6. 百度地图Api进阶教程-创建标注和自定义标注3.html

    <!DOCTYPE html> <html> <head> <meta name="viewport" content="ini ...

  7. 百度地图Api进阶教程-默认控件和自定义控件2.html

    <!DOCTYPE html> <html> <head> <meta name="viewport" content="ini ...

  8. 百度地图Api进阶教程-点聚合9.html

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  9. 百度地图 api 功能封装类 (ZMap.js) 本地搜索,范围查找实例

    百度地图 api 功能封装类 (ZMap.js) 本地搜索,范围查找实例 相关说明 1. 界面查看: 吐槽贴:百度地图 api 封装 的实用功能 [源码下载] 2. 功能说明: 百度地图整合功能分享修 ...

随机推荐

  1. python 2 python3 共存

    步骤: 1.安装python3 并添加环境变量2.修改python3 目录下文件名:修改python.exe 为python3.exe, 修改pythonw.exe 为pythonw3.exe C:\ ...

  2. 如何在"Visual Studio Code"中使用" Git" 进行版本控制

    如何在"Visual Studio Code"中使用" Git" 进行版本控制 本来认为此类教程,肯定是满网飞了.今天首次使用VS Code的Git功能,翻遍了 ...

  3. 从ext4将mysql数据目录移动至lustre出现(InnoDB: Unable to lock ./ibdata1, error: 38.)

    因为数据目录过大,因此我把目录从本地移到了共享存储中.在修改了/etc/my.cnf和/etc/init.d/mysqld之后发现数据库可以运行,但启动速度很慢 原因是原文件系统是ext4,而目标文件 ...

  4. postman发送post数据到node.js中

    使用get请求我们很容易的来利用postman来发送数据,但是今天的express在使用postman进行post请求的时候,竟然解析的body是空对象.在网上找了一下果然有解决方法,如下: 因为是P ...

  5. shell 知识点

        Q:1 Shell脚本是什么.它是必需的吗? 答:一个Shell脚本是一个文本文件,包含一个或多个命令.作为系统管理员,我们经常需要使用多个命令来完成一项任务,我们可以添加这些所有命令在一个文 ...

  6. 对于android浏览器的一些看法

    首先我先声明我不是一个浏览器开发者,只是近段时间看了一些关于浏览器的东西,才有一些看法. 在几年前开发手机的web 页面,都经常因为JS插件不兼容android WebView内核,导致开发浪费大量时 ...

  7. Java Web(六) EL表达式

    这也是属于JSP范围内的知识,使用EL表达式,能更好的使用JSP中的各种内置对象和作用域,说点闲话,马上要出去实习了,有点恐慌,可能这是马上要出去工作的学生的通病,继续努力把,兵来将挡水来土掩, -- ...

  8. [svc]centos6上部署openvpn+gg二步认证

    最近又发现个新的vpn: wireguard 为了满足员工在家办公的需求.需要 openvpn+gg方案 在centos6上部署openvpn 参考 1.安装前准备 wget -O /etc/yum. ...

  9. 基于 vue 全家桶的 spa 项目脚手架

    项目简介 Github: https://github.com/hanan198501/vue-spa-template 我们基于 vue-cli 脚手架生成项目模板做了一些改造,加入了 vue-ro ...

  10. android studio : clang++.exe: error: invalid linker name in argument '-fuse-ld=bfd

    公司jenkins上的C++编译器最近换成了clang,今天更新了代码发现本地的C/C++代码用NDK编译不过了,提示: “clang++.exe: error: invalid linker nam ...