<!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. JS代码放置位置、变量与数据类型、运算符与逻辑表达运算符

    内容简要: 1.JS代码放置位置的问题: 2.变量与数据类型: 3.运算符与逻辑表达式的运算符   我的位置 全局问题:为何在网页推荐位置(一般在<head></head>内部 ...

  2. 如何提高码农产量，基于ASP.NET MVC的敏捷开发框架开发随笔一

    公司业务量比较大,接了很多项目,为了缩短开发周期老板让我牵头搭建了一个敏捷开发框架. 我们主要的业务是做OA.CRM.ERP一类的管理系统,一个通用的后台搭出来,再配合一些快速开发的组件开发效率能提高 ...

  3. DIV嵌套垂直居中

    第一记住一点:父级相对定位,子级绝对定位 下面演示CSS样式: .父级DIV{ margin:0px auto; position:relative; border:2px solid #ff0000 ...

  4. 与众不同 windows phone (36) - 8.0 新的瓷贴: FlipTile, CycleTile, IconicTile

    [源码下载] 与众不同 windows phone (36) - 8.0 新的瓷贴: FlipTile, CycleTile, IconicTile 作者:webabcd 介绍与众不同 windows ...

  5. 与众不同 windows phone (43) - 8.0 相机和照片: 镜头的可扩展性, 图片的可扩展性, 图片的自动上传扩展

    [源码下载] 与众不同 windows phone (43) - 8.0 相机和照片: 镜头的可扩展性, 图片的可扩展性, 图片的自动上传扩展 作者:webabcd 介绍与众不同 windows ph ...

  6. HTML5 Audio and JavaScript Control

    IE8 以下无效 <!DOCTYPE html> <html> <head> <meta content="text/html; charset=u ...

  7. 如何高效部署前端代码，如css，js...

    看了网上一些文章,做了点总结,顺便再加点自己的东西,简单的说下. 1.利用浏览器的304缓存,但是304叫协商缓存,还是需要与服务器通信一次 2.强制使用浏览器使用本地缓存(cache-control ...

  8. AC自动机---Keywords Search

    题目网址:http://acm.hust.edu.cn/vjudge/contest/view.action?cid=110773#problem/A Description In the moder ...

  9. Linux Shell系列教程之（十二）Shell until循环

    本文是Linux Shell系列教程的第(十二)篇,更多Linux Shell教程请看:Linux Shell系列教程 在上两篇文章Linux Shell系列教程之(十)Shell for循环和Lin ...

  10. NTFS碎片

    在Windows操作系统中查看各分区的文件系统: fsutil fsinfo ntfsinfo c: (查看C:盘的文件系统) fsutil fsinfo ntfsinfo d: (查看D:盘的文件系 ...