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. Jenkins+ Xcode+ 蒲公英 实现IOS自动化打包和分发

    Jenkins+ Xcode+ 蒲公英 实现IOS自动化打包和分发 直接入正题: Screen Shot 2015-09-18 at 16.56.20.png Mac上安装Jekins jekins下 ...

  2. ftp 长传报错553 可能是选的目录不对

    ftp> put /root/20180711tmp.txt /cc.txt local: /root/20180711tmp.txt remote: /cc.txt 200 PORT comm ...

  3. iOS边练边学--plist文件，懒加载，模型初使用--补充instancetype

    一.什么是plist文件 1>将数据直接写在代码里面,不是一种合理的做法.如果数据经常修改,就要经常翻开对应的代码进行修改,造成代码扩展性低 2>因此,可以考虑将经常变得数据放在文件中进行 ...

  4. C# 字典 Dictionary 遍历

    using System; using System.Collections.Generic; public class Example { public static void Main() { / ...

  5. selenium测试（Java）-- 键盘事件（七）

    1 package com.test.key; 2 3 import org.openqa.selenium.By; 4 import org.openqa.selenium.Keys; 5 impo ...

  6. ffmpeg 源码分析

    http://blog.csdn.net/liuhongxiangm/article/details/8824761 https://code.google.com/p/ffmpegsource/is ...

  7. Javascript农历与公历相互转换

    /**用法 * Lunar.toSolar(2016, 6, 3); 农历转化公历 * Lunar.toLunar(2016, 7, 6); 公历转化农历 */ var Lunar = { MIN_Y ...

  8. java与c#的语法对比

    1,命名空间与包 C#为了把实现相似功能的类组织在一起,引入了命名空间的概念(namespace) Java中与此对应的东西叫做包(package) 2,类的访问控制方面的不同 C#只有两种:publ ...

  9. iOS开发- UILabel 自己主动换行 及 高度自适应

    主要是今天看到论坛有人问这个问题.帮忙解决之后, 顺便Mark下. 非常easy, 代码写的非常清楚. 直接上代码. UILabel *label = [[UILabel alloc] initWit ...

  10. [转]JVM运行时内存结构

    [转]http://www.cnblogs.com/dolphin0520/p/3783345.html 目录[-] 1.为什么会有年轻代 2.年轻代中的GC 3.一个对象的这一辈子 4.有关年轻代的 ...