984aca5bc78b070e59f34e230f11cf6d

http://api.map.baidu.com/api?v=2.0&ak=您的密钥"

<html>

<head>

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

    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

    <style type="text/css">

        body, html {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";font-family:"微软雅黑";}

        #allmap{width:100%;height:500px;}

        p{margin-left:5px; font-size:14px;}

    </style>

    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>

    <title>地图单击事件</title>

</head>

<body>

    <div id="allmap"></div>

    <p>添加点击地图监听事件，点击地图后显示当前经纬度</p>

</body>

</html>

<script type="text/javascript">

    // 百度地图API功能

    var map = new BMap.Map("allmap");

    map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);

    function showInfo(e){

        alert(e.point.lng + ", " + e.point.lat);

    }

    map.addEventListener("click", showInfo);

</script>
    <div class="fitem">

        <div class="ftitle">场馆地址<span class="bi">*</span></div>

        <input name="stadium_address"  type="text" class="text" size="30" />

    </div>

    <div class="fitem">

        <div class="ftitle">地理位置经度<span class="bi">*</span></div>

        <input name="longitude" id="longitude" type="text" class="text" size="30" />

    </div>

     <div class="fitem">

        <div class="ftitle">地理位置纬度<span class="bi">*</span></div>

        <input name="latitude" id="latitude"   type="text" class="text" size="30" />

    </div>

    <div class="fitem">

        <input name="map_search" id="map_search"   type="text" class="text" size="30" />

        <input name="search" id="search"   type="button" value="搜"  />

        <div id="allmap"></div>

    </div>
    //百度地图API功能

    var map = new BMap.Map("allmap");

    map.centerAndZoom(new BMap.Point(114.068, 22.5469), 13);

    $("#search").click(function(){

        var place=$('#map_search').val();

        var local = new BMap.LocalSearch(map, {

            renderOptions:{map: map}

        });

        local.search(place);

    });

    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

    function showInfo(e){

        document.getElementById("longitude").value=e.point.lng;

        document.getElementById("latitude").value=e.point.lat;

        //map.addOverlay(new BMap.Marker(new BMap.Point(e.point.lng,e.point.lat)));

        map.clearOverlays();

        var new_point = new BMap.Point(e.point.lng,e.point.lat);

        var marker = new BMap.Marker(new_point);  // 创建标注

        map.addOverlay(marker);              // 将标注添加到地图中

        map.panTo(new_point);  

        //alert(e.point.lng + ", " + e.point.lat);

    }

    map.addEventListener("click", showInfo); 
//百度地图API功能

                                        (function () {

                                                var map = new BMap.Map("allmap");

                                                map.centerAndZoom(new BMap.Point(114.068, 22.5469), 13);

                                                //开启鼠标滚轮缩放

                                                map.enableScrollWheelZoom(true);

                                                //添加事件

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

                                                        document.getElementById("longitude").value = e.point.lng;

                                                        document.getElementById("latitude").value = e.point.lat;

                                                        map.clearOverlays();

                                                        var new_point = new BMap.Point(e.point.lng, e.point.lat);

                                                        var marker = new BMap.Marker(new_point);  // 创建标注

                                                        map.addOverlay(marker);              // 将标注添加到地图中

                                                        map.panTo(new_point);

                                                });

                                                function theLocation(){

                                                        if(document.getElementById("longitude").value != 0 && document.getElementById("latitude").value != 0)

                                                        {

                                                                map.clearOverlays();

                                                                var new_point = new BMap.Point(document.getElementById("longitude").value,document.getElementById("latitude").value);

                                                                var marker = new BMap.Marker(new_point);  // 创建标注

                                                                map.addOverlay(marker);              // 将标注添加到地图中

                                                                map.panTo(new_point);

                                                        }

                                                }

                                                theLocation();

                                        })();

百度地图API功能的更多相关文章

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

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

  2. 百度地图API功能集锦

    1.点个数太多导致加载缓慢的解决. 2.可视化区域内加载的解决. 3.自定义信息窗口解决. 4.区域/板块/商圈等的绘制功能解决. 基本包含了用到百度地图API会使用到的大部分常规性场景.(聚合点功能 ...

  3. 百度地图 api 功能封装类 (ZMap.js) 本地搜索,范围查找实例 [源码下载]

    相关说明 1. 界面查看: 吐槽贴:百度地图 api 封装 的实用功能 [源码下载] 2. 功能说明: 百度地图整合功能分享修正版[ZMap.js] 实例源码! ZMap.js 本类方法功能大多使用 ...

  4. 百度地图 api 功能封装类 (ZMap.js) 新增管理事件功能 [源码下载]

    ZMap 功能说明 ZMap.js 本类方法功能大多使用 prototype 原型 实现: 包含的功能有:轨迹回放,圈画区域可编辑,判断几个坐标是否在一个圆圈内,生活服务查询,从经纬度获取地址信息,地 ...

  5. 百度地图API 批量添加 带检索功能的信息窗口

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. 百度地图API 重新生成点聚合的功能

    百度点聚合用来解决加载大量点要素到地图上产生覆盖现象的问题,并提高性能. http://api.map.baidu.com/library/MarkerClusterer/1.2/docs/symbo ...

  7. 百度地图API的自动定位和搜索功能（移动端）

    近期有个项目涉及到百度地图API,要求做到自动定位和搜索功能.煞费苦心的研究半天,终于能将两个功能合二为一,现将代码贴出来分享给大家,希望你们的砖搬得又快又好.注释不多,具体请参照:http://lb ...

  8. JavaScript对接百度地图api实现地图标点功能

    粗略的做了个地图标点功能 首先,去百度注册开发者账号,然后进入到百度地图开放平台 进入到控制台, 创建浏览器端应用,给个安全域名 然后去开发者文档JavaScript里面找地图展示文档,直接怼上去就行 ...

  9. 吐槽贴：百度地图 api 封装 的实用功能 [源码下载]

    ZMap 类 功能介绍 ZMap 是学习百度地图 api 接口,开发基本功能后整的一个脚本类,本类方法功能大多使用 prototype 原型 实现: 包含的功能有:轨迹回放,圈画区域可编辑,判断几个坐 ...

随机推荐

  1. Hive Tunning（二）优化存储

    接着上一章我们讲的hive的连接策略,现在我们讲一下hive的数据存储. 下面是hive支持的数据存储格式,有我们常见的文本,JSON,XML,这里我们主要讲一下ORCFile. Built-in F ...

  2. 看板与Scrum：哪个更适合你的团队？

    敏捷是理想型指标和原则,看板和Scrum是帮助团队坚持敏捷原则并完成工作的基本框架.本文详细介绍了在Scrum和看板之间做出选择时要考虑的关键因素,以及如果我们无法做出决定时该怎么办. Scrum和看 ...

  3. HTTP协议详解（文档）

    目录引言................................................................................................ ...

  4. file文件与base64字符串的相互转换

    今天心情不好,不想说话. /** * 文件转base64字符串 * @param file * @return */ public static String fileToBase64(File fi ...

  5. 用isNaN函数来判断是否只能输入正负数字

    isNaN() 函数通常用于检测 parseFloat() 和 parseInt() 的结果, 以判断它们表示的是否是合法的数字.当然也可以用 isNaN() 函数来检测算数错误,比如用 0 作除数的 ...

  6. C语言中带参数的宏

    带参数的宏定义有如下的格式: [#define 指令----带参数的宏] #define 标识符(x1,x2,……,xn) 其中  x1,x2,……xn是标志符(宏的参数) 注意:在宏的名字和括号之间 ...

  7. Linux之查看文件大小和数目

    1.查看当前文件大小du -sh ./ du [-abcDhHklmsSx] [-L <符号连接>][-X <文件>][--block-size][--exclude=< ...

  8. html -- 实体

  9. VirtualBox 配置虚拟网卡(桥接),实现主机-虚拟机网络互通

    记录下VirtualBox 配置虚拟网卡(桥接),实现主机-虚拟机网络互通过程,网上搜出来的比较乱,讲的不明不白,因此根据自己弄过一次,确认可行的方式,做个备份,方便日后查阅. 环境: 在Oracle ...

  10. struts2的零配置

    最近开始关注struts2的新特性,从这个版本开始,Struts开始使用convention-plugin代替codebehind-plugin来实现struts的零配置.配置文件精简了,的确是简便了 ...