<!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);//鼠标滑动轮子可以滚动

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

            if(iscreatr==true)return;

            //---------------------------------------------遮盖物---------------------------------------------

            iscreatr=true;

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

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

             var marker = new BMap.Marker(point);

             var label = new BMap.Label("我是可以拖动的",{offset:new BMap.Size(20,-10)});

             marker.setLabel(label)

             map.addOverlay(marker);

             marker.enableDragging();    //可拖拽

             marker.addEventListener("dragend", function(e){

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

             });

        });

    }

    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>

百度地图Api进阶教程-点击生成和拖动标注4.html的更多相关文章

  1. 百度地图Api进阶教程-实例高级操作8.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进阶教程-弹出信息窗口5.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进阶教程-默认控件和自定义控件2.html

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

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

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

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

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

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

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

  9. 使用百度地图API进行Android地图应用开发（Eclipse）

    随着基于位置的服务的兴起,地图类App呈现爆发趋势.随着而来的是地图供应商开放大量的API.供开发人员开发基于PC或者移动端的应用程序. 如今我们研究使用百度地图SDK进行Android项目的开发. ...

随机推荐

  1. DotNetCore跨平台~Startup类的介绍

    新宠儿 DotNetCore是.net5.0版本,之所以不叫.net5.0为的就是不让我们把它与前面的.net混为一淡,它将是真正意义的跨平台开发语言,在网上也有相关介绍,中国的一些大牛也发了相关文章 ...

  2. js用正则表达式验证用户和密码的安全性，生成随机验证码

    制作了一个表单,表单验证用户.密码.随机验证码 html页面

  3. javascript: jquery.gomap-1.3.3.js

    from:http://www.pittss.lv/jquery/gomap/solutions.php jquery.gomap-1.3.3.js: /** * jQuery goMap * * @ ...

  4. csharp: WebBrowser read baidumap

    setpoint.html: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Typ ...

  5. 【学习整理】NOIP涉及的数论 [updating]

    扩展欧几里得 求二元一次不定式方程 的一组解. int exgcd(int a,int b,int &x,int &y) { int t; ;y=;return a;} t=exgcd ...

  6. 后缀数组---Milk Patterns

    POJ  3261 Description Farmer John has noticed that the quality of milk given by his cows varies from ...

  7. Eclipse下Android开发的问题：Installation error: INSTALL_FAILED_NO_MATCHING_ABIS 解决办法

    在Android模拟器上安装apk的时候出现   INSTALL_FAILED_NO_MATCHING_ABIS 这个错误提示的解决办法. 是由于使用了native libraries .该nativ ...

  8. SQL数据库基础（八）

    连接查询:通过连接运算符可以实现多个表查询.连接是关系数据库模型的主要特点,也是它区别于其它类型数据库管理系统的一个标志. 常用的两个链接运算符: 1.join   on 2.union     在关 ...

  9. MUI - 图片预览（perviewimage）的优化

    主要对mui图片全屏预览插件做了以下三点补充 1.添加了预览图片文字说明,使用的时候需要添加以下css及DOM属性 .mui-slider-img-content { position: absolu ...

  10. 本地Git服务器的搭建及使用

    本地Git服务器的搭建及使用 Git本地服务器环境搭建 搭建好的本地git服务器的局域网ip是192.168.1.188,用户名是RSCSVN 教程链接:http://blog.csdn.net/cc ...