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. Unity3d修炼之路：GUIbutton简单使用，完毕对一个简单对象Cube的移动，旋转

    #pragma strict private var m_pCubeObj : GameObject = null; private var m_pMeshFilter : MeshFilter = ...

  2. javascript-限制文本框只输入数字

    使用onInput()事件 oninput 是 HTML5 的标准事件,对于检测 textarea, input:text, input:password 和 input:search 这几个元素通过 ...

  3. Ajax类

    ajax.js -------------------------[ajax类]-------------------------- function Ajax(recvType){ var aj=n ...

  4. js学习笔记11----表单操作

    1.复选框选中 var aInput = document.getElementsByTagname('input'); aInput[0].checked=true;

  5. tp-01 搭建过程

    1:拷贝ThinkPHP框架系统文件夹自己的www目录中的tp-shop文件夹中 2:新建自己的项目文件(比如:shop)夹与ThinkPHP框架系统文件夹在同一级目录(当然也可以不同) 3: 在tp ...

  6. ggplot饼图

    目录: 原始图样 如何去除饼图中心的杂点 如何去除饼图旁边的标签 如何去掉左上角多出来的一横线 如何去掉图例的标题,并将图例放到上面 如何对图例的标签加上百分比 如何让饼图的小块按顺时针从大到小的顺序 ...

  7. (三)使用预定义模型QDirModel的例子

    使用预定义模型QDirModel的例子 Main.cpp #include <QApplication> #include "directoryviewer.h" in ...

  8. 关于在Android中Activity页面跳转的方法

    一.无返回结果的页面跳转 1.创建两个类FActivity.java和SActivity.java 2.创建两个layout目录下的factivity.xml和sactivity.xml 3.在And ...

  9. 下面关于XML叙述不正确的是（ ）

    A.XML标记必须关闭 B.XML是大小写敏感的 C.XML文件只能跟DTD文件一块使用 D.XML和XSL结合可以在浏览器上显示 解答:C

  10. Zookeeper 工作流

    一旦ZooKeeper集合启动,它将等待客户端连接.客户端将连接到ZooKeeper集合中的一个节点.它可以是leader或follower节点.一旦客户端被连接,节点将向特定客户端分配会话ID并向该 ...