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. lua中table如何安全移除元素

    在Lua中,table如何安全的移除元素这点挺重要,因为如果不小心,会没有正确的移除,造成内存泄漏. 引子 比如有些朋友常常这么做,大家看有啥问题 将test表中的偶数移除掉local test = ...

  2. laravel 控制器

    1:如何快速的创建一个控制器 用cmd进入当前的项目名文件夹里面执行如下语句: php artisan  make:controller  HgjController 2:编辑Hgj中的index方法 ...

  3. Stay hungry, stay foolish. 求知若饥，虚心若愚。

    如果留意我博客的朋友,应该都有看到这句话在我的自我介绍栏目存在了好长一段时间了,另外,我的 QQ.旺旺.MSN等都有这个签名.Stay hungry, stay foolish.(求知若饥,虚心若愚) ...

  4. Linux如何通过命令查看日志文件的某几行(中间几行或最后几行)

    linux 如何显示一个文件的某几行(中间几行) [一]从第3000行开始,显示1000行.即显示3000~3999行 cat filename | tail -n +3000 | head -n 1 ...

  5. 《FPGA全程进阶---实战演练》第三章之接地设计

    信号回路的电位基准点,(直流电源的负极或者零伏点)在单板上可以分为数字地和模拟地.理想的工作地是电路参考点的等电位平面,然而在实际中,工作地被认为信号电流的低阻抗回路和电源的供电回路,这样就会有三个方 ...

  6. Hibernate查询_HQL_EJBQL_QBC_QBE

    查询按功能强弱可以分为以下几种:Native SQL > HQL > EJBQL > QBC > QBE 1.Native SQLNative SQL为数据库系统本身的SQL, ...

  7. 使用 const 提高函数的健壮性

    使用 const  提高函数的健壮性 看到 const 关键字,C++程序员首先想到的可能是 const 常量.这可不是良好的条件 反射.如果只知道用 const 定义常量,那么相当于把火药仅用于制作 ...

  8. linux -- chown修改文件拥有者和所在组

    chown将指定文件的拥有者改为指定的用户或组,用户可以是用户名或者用户ID:组可以是组名或者组ID:文件是以空格分开的要改变权限的文件列表,支持通配符.系统管理员经常使用chown命令,在将文件拷贝 ...

  9. jquery日期插件datePicker

    index.html <!DOCTYPE html> <html lang="zh-cn"> <head> <meta http-equi ...

  10. ueditor1_4_3_3编辑器的应用

    教程使用的是ueditor1_4_3_3版本. 首先到官网http://ueditor.baidu.com/website/download.html下载jsp  utf-8版 下载好以后,解压,把解 ...