<!DOCTYPE html>

<html>

<head>

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

<title>16.1</title>

 <script type=text/javascript src=http://fw.qq.com/ipaddress></script>

<script type="text/javascript">

    var iscreatr = false; //是否创建

    var map;  // 百度地图

    var marker;  // 标注

    var markX; // 标注x

    var markY; // 标注y

    //加载完地图回调

    function initialize() {

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

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

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

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

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

        map.addEventListener("click", function (e) {

            if (iscreatr == true) return;

            //---------------------------------------------创建标注---------------------------------------------

            iscreatr = true;

            markX = e.point.lng;

            markY = e.point.lat;

            var point = new BMap.Point(e.point.lng, e.point.lat); //默认

            // 创建标注对象并添加到地图

            marker = new BMap.Marker(point);

            var label = new BMap.Label("我是可以拖动的，右键取消的", { offset: new BMap.Size(, -) });

            marker.setLabel(label)

            map.addOverlay(marker);

            marker.enableDragging();    //可拖拽

            marker.addEventListener("dragend", function (e) {   //标注拖动事件

                markX = e.point.lng;

                markY = e.point.lat;

                document.getElementById("r-result").innerHTML = e.point.lng + ", " + e.point.lat; //打印拖动结束坐标

            });

        });

        //---------------------------------------------鼠标右键取消标注操作---------------------------------------------

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

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

            {

            text: '取消',

            callback: function () {

                map.removeOverlay(marker);

                iscreatr = false;

            }

}

        ];

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

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

        }

        map.addContextMenu(menu);

    }

    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;

    //-------------------------------------

    //切换地图

    function changeType(value) {

        map.setCenter(value);

    }

    //提交

    function submit() {

        if (iscreatr == true) {

            alert(markX + ":" + markY);

        }

    }

</script>

</head>

 <body>

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

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

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

        <input type="button" onclick="submit()" value="提交" /></br>

        切换城市：<select onchange="changeType(this.value)" >

            <option value ="北京">北京</option>

            <option value ="广州">广州</option>

            <option value="成都">成都</option>

        </select>

    </div>

</body>

<script type="text/javascript">

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

    // 移动到某城市    map.setCenter("广州");   //两秒后移动到广州

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

</script>

百度地图Api进阶教程-实例高级操作8.html的更多相关文章

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

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

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

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

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

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

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

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

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

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

  6. 百度地图Api进阶教程-弹出信息窗口5.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. ios 百度地图api 入门

    百度地图api 官方教程: http://developer.baidu.com/map/index.php?title=iossdk 这个非常好, 很适合新手 CLLocationCoordinat ...

随机推荐

  1. MySQL几点重要的性能指标计算和优化

    qps 每秒处理的查询数tps 每秒处理的事务数IOPS 每秒磁盘进行的I/O操作次数 一.TPS:Transactions Per Second(每秒传输的事物处理个数),即服务器每秒处理的事务数. ...

  2. 如何获取 XAML 控件的模板代码

    有时候 .NET 自带提供的控件并不能满足我们的实际需求,需要进行修改,或者参考代码来建立新的控件. 可以在编辑器的文档大纲窗口中,找到所需的对象,然后在其上点右键,编辑模板,编辑副本 弹出创建 St ...

  3. IOS使用AVAudioPlayer播放mp3歌曲文件并监听来电打断

    本实例实现了AVAudioPlayer播放mp3歌曲文件,实现了播放.暂停.继续操作,音乐音量控制.播放进度显示,同时监听来电打断事件 一.控件初始化 - (void)viewDidLoad { [s ...

  4. Mysql 管理和备份

    mysqladmin用于管理MySQL服务器的客户端,mysqladmin执行管理操作的客户程序,可以用它来创建或删除数据库,重载授权表,将表刷新到硬盘上,以及重新打开日志文件,检索版本.进程,以及服 ...

  5. [MyBean说明书]-如何进行最简单的DEMO

    MyBean是轻量级的.绿色的框架,不需要安装任何的组件和携带任何的其他文件,前 期步骤已经相当精简了,仔细阅读完下面简单的五个步骤,就可以编写基于MyBean的插件: 1.加入Delphi的搜索路径 ...

  6. Kafka：架构简介【转】

    转:http://www.cnblogs.com/f1194361820/p/6026313.html Kafka 架构简介 Kafka是一个开源的.分布式的.可分区的.可复制的基于日志提交的发布订阅 ...

  7. 一、图解Java中String不可变性

    这里有一堆例子来说明Java的String的不可变性. 1.声明一个String String s = "abcd"; s 变量保存string对象的引用,下面的箭头解释成保存了哪 ...

  8. Asp.Net微信支付接口之jsApiPay教程

      1.微信支付JsApiPay只能在微信浏览器中使用 2.必须先申请微信支付功能 3.设置域名 4.设置支付授权目录 一定要精确到最后一级目录 5.获取APPID和AppSecret AppSecr ...

  9. java向mysql插入数据乱码

    修改jdbc的链接,将原来的         jdbc:mysql://localhost:3306/demo改为        jdbc:mysql://localhost:3306/demo?us ...

  10. Unique constraint on single String column with GreenDao

    转:http://stackoverflow.com/questions/22070281/greendao-support-for-unique-constraint-on-multiple-col ...