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. Zookeeper和分布式环境中的假死脑裂问题(转)

    Zookeeper和分布式环境中的假死脑裂问题 最近和同事聊天无意间发现他们的系统也存在脑裂的问题.想想当初在我们的系统中为了解决脑裂花了非常大的功夫,现在和大家一起讨论下脑裂,假死等等这些问题和解决 ...

  2. linux 使用NSF 映射远程磁盘目录

    假设源目录在192.168.1.1机器上,目录为/data 客户端集群在192.168.1.2, 需要将192.168.1.1机器上的/data目录到本地的/data目录 1.在两台机器上安装nsf ...

  3. MapReduce 学习(一)

    首先我们先来欣赏一下MapReduce的执行过程吧,如下图,自己看,不解释了. Map 和 Reduce 的处理都是基于Key/Value来进行的,在Map中对文件的每一行进行处理,有两个输入参数,K ...

  4. 最简单的基于FFmpeg的移动端样例：Android 视频解码器-单个库版

    ===================================================== 最简单的基于FFmpeg的移动端样例系列文章列表: 最简单的基于FFmpeg的移动端样例:A ...

  5. daterangepicker 使用方法总结

    daterangepicker 是一个时间段选择插件.官网地址:http://www.daterangepicker.com/ 项目中需要实现如下图的效果: 1.引入该插件所需要的JS 和 CSS , ...

  6. [从jQuery看JavaScript]-JavaScript

    什么是JavaScript?相信随便百度Google一下都能找到一大堆的定义解释.而在我的理解中,JavaScript就是一种客户端的脚本语言,用于处理页面数据逻辑和用户体验(网页特效).实际上,Ja ...

  7. 7 款灵巧实用的 CSS3/jQuery 工具

    作为 Web 前端开发者,应该对 jQuery 比较熟悉,对免费开源的 jQuery 也用的非常多.但是随着 CSS3 标准的诞生和发展,很多 jQuery 插件也都纷纷应用了 CSS3 新标准,也因 ...

  8. Convolution Network及其变种（反卷积、扩展卷积、因果卷积、图卷积）

    今天,主要和大家分享一下最近研究的卷积网络和它的一些变种. 首先,介绍一下基础的卷积网络. 通过PPT上的这个经典的动态图片可以很好的理解卷积的过程.图中蓝色的大矩阵是我们的输入,黄色的小矩阵是卷积核 ...

  9. C++泛型和算法

    看书的速度终于慢了下来,倒不是难于理解,而是需要理解的东西有点多. 先吐槽下C++Primer这本书,不少地方都是用抽象的语言进行介绍! 拜托,你这是介绍,不是总结! 像容器适配器那里: “本质上,适 ...

  10. 解决ubuntu下mysql不能远程连接数据库的问题【转】

    Ubuntu10.04上自带的MySQL,执行了root@ubuntu:~#sudo apt-get install mysql安装完mysql-server 启动mysqlroot@ubuntu:~ ...