这个只是入门,详细的还得看官方的文档http://lbsyun.baidu.com/index.php?title=jspopular3.0/guide/helloworld

　　百度地图的“Hello, World”　　

　　开始学习百度地图API最简单的方式是看一个简单的示例。该示例帮助您快速了解百度地图API的基本使用，快速创建一张“我的地图”。

　　如下代码可以实现一个简单完整的全屏展示的地图Demo：

       1.申请百度账号和ak
       2.准备页面

根据HTML标准，每一份HTML文档都应该声明正确的文档类型，我们建议您使用最新的符合HTML5规范的文档声明：

<!DOCTYPE html>

您也可以根据需要选择其他类型的文档声明，这样浏览器会以标准的方式对页面进行渲染，保证页面最大的兼容性。我们不建议您使用quirks模式进行开发。

3.适应移动端页面展示

下面我们添加一个meta标签，以便使您的页面更好的在移动平台上展示。

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

4.设置容器样式

设置容器样式大小，使地图充满整个浏览器窗口：

<style type="text/css">

    html{height:%}

    body{height:%;margin:0px;padding:0px}

    #container{height:%}

</style>

5.引用百度地图API文件

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

6.创建地图容器元素

地图需要一个HTML元素作为容器，这样才能展现到页面上。这里我们创建了一个div元素。
<div id="container"></div>

7.创建地图实例

位于BMap命名空间下的Map类表示地图，通过new操作符可以创建一个地图实例。其参数可以是元素id也可以是元素对象。

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

注意：

7.1.在调用此构造函数时应确保容器元素已经添加到地图上。

7.2.命名空间 API使用BMap作为命名空间，所有类均在该命名空间之下，比如：BMap.Map、BMap.Control、BMap.Overlay。

8.设置中心点坐标

　　　这里我们使用BMap命名空间下的Point类来创建一个坐标点。Point类描述了一个地理坐标点，其中116.404表示经度，39.915表示纬度。（为天安门坐标）

var point = new BMap.Point(116.404, 39.915);

注意：在使用百度地图JavaScript API服务时，需使用百度BD09坐标，如使用其他坐标（ WGS84、GCJ02）进行展示，需先将其他坐标转换为BD09，详细说明请参考坐标转换说明，请勿使用非官方的转换方法！！！

9.地图初始化，同时设置地图展示级别

在创建地图实例后，我们需要对其进行初始化，BMap.Map.centerAndZoom()方法要求设置中心点坐标和地图级别。 地图必须经过初始化才可以执行其他操作。

map.centerAndZoom(point, );

至此，我们就快速创建了一张以天安门为中心的地图~

 地图配置与操作

地图被实例化并完成初始化以后，就可以与其进行交互了。

API中的地图对象的外观与行为与百度地图网站上交互的地图非常相似。它支持鼠标拖拽、滚轮缩放、双击放大等交互功能。您也可以修改配置来改变这些功能。

比如，默认情况下地图不支持鼠标滚轮缩放操作，因为这样可能会影响整个页面的用户体验，但是如果您希望在地图中使用鼠标滚轮控制缩放，则可以调用map.enableScrollWheelZoom方法来开启。配置选项可以在Map类参考中找到。

此外，您还可以通过编程的方式与地图交互。Map类提供了若干修改地图状态的方法。例如：setCenter()、panTo()、zoomTo()等等。

示例： 等待两秒钟后，地图它会移动到新中心点。panTo()方法将让地图平滑移动至新中心点，如果移动距离超过了当前地图区域大小，则地图会直跳到该点。

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

var point = new BMap.Point(116.404, 39.915);

map.centerAndZoom(point, );

window.setTimeout(function(){

    map.panTo(new BMap.Point(116.409, 39.918));

}, );
<!DOCTYPE html>

<html>

<head>

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

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

<title>Hello, World</title>

<style type="text/css">

html{height:%}

body{height:%;margin:0px;padding:0px}

#container{height:%}

</style>

<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=xx">

//v3.0版本的引用方式：src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥"

</script>

</head>  

<body>

<div id="container"></div>

<script type="text/javascript">

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

// 创建地图实例

//Point(经度,纬度);

var point = new BMap.Point(121.503693,31.243632);

// 创建点坐标

map.centerAndZoom(point, );

// 初始化地图，设置中心点坐标和地图级别

</script>

</body>

</html>

有的时候,你拿到的经纬度可能是GPS的需要转换为，自己项目可识别的坐标,比如百度,这就需要转换.

<script type="text/javascript">

    // 百度地图API功能

    //GPS坐标

    var x = 116.32715863448607;

    var y = 39.990912172420714;

    var ggPoint = new BMap.Point(x,y);

    //地图初始化

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

    bm.centerAndZoom(ggPoint, );

    bm.addControl(new BMap.NavigationControl());

    //添加gps marker和label

    var markergg = new BMap.Marker(ggPoint);

    bm.addOverlay(markergg); //添加GPS marker

    var labelgg = new BMap.Label("未转换的GPS坐标（错误）",{offset:new BMap.Size(,-)});

    markergg.setLabel(labelgg); //添加GPS label

    //坐标转换完之后的回调函数

    translateCallback = function (data){

      if(data.status === ) {

        var marker = new BMap.Marker(data.points[]);

        bm.addOverlay(marker);

        var label = new BMap.Label("转换后的百度坐标（正确）",{offset:new BMap.Size(,-)});

        marker.setLabel(label); //添加百度label

        bm.setCenter(data.points[]);

      }

    }

    setTimeout(function(){

        var convertor = new BMap.Convertor();

        var pointArr = [];

        pointArr.push(ggPoint);

        convertor.translate(pointArr, , , translateCallback)

    }, );

</script>

有时候需要在地图上出现下拉框进行选择,就在地图上加自定义控件就成.

<body>

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

    <p>在地图左上角添加"放大2级"自定义控件，双击放大地图2级</p>

</body>

</html>

<script type="text/javascript">

    // 百度地图API功能

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

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

    // 定义一个控件类,即function

    function ZoomControl(){

      // 默认停靠位置和偏移量

      this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;

      this.defaultOffset = new BMap.Size(, );

    }

    // 通过JavaScript的prototype属性继承于BMap.Control

    ZoomControl.prototype = new BMap.Control();

    // 自定义控件必须实现自己的initialize方法,并且将控件的DOM元素返回

    // 在本方法中创建个div元素作为控件的容器,并将其添加到地图容器中

    ZoomControl.prototype.initialize = function(map){

      // 创建一个DOM元素

      var div = document.createElement("div");

      // 添加文字说明

      div.appendChild(document.createTextNode("放大2级"));

      // 设置样式

      div.style.cursor = "pointer";

      div.style.border = "1px solid gray";

      div.style.backgroundColor = "white";

      // 绑定事件,点击一次放大两级

      div.onclick = function(e){

        map.setZoom(map.getZoom() + );

      }

      // 添加DOM元素到地图中

      map.getContainer().appendChild(div);

      // 将DOM元素返回

      return div;

    }

    // 创建控件

    var myZoomCtrl = new ZoomControl();

    // 添加到地图当中

    map.addControl(myZoomCtrl);

</script>
   
 

(办公)百度api的使用的更多相关文章

  1. 百度api:根据经纬度获取地理位置信息

    调用百度api,根据经度和纬度获取地理位置信息,返回Json. C#代码: using Newtonsoft.Json; using Newtonsoft.Json.Linq; using Syste ...

  2. .net根据经纬度获取地址(百度api)

    private string GetAddress(string lng, string lat) { try { string url = @"http://api.map.baidu.c ...

  3. 百度API的经历，怎样为多个点添加带检索功能的信息窗口

    不管我们要做什么样的效果,APIKey(密钥)都是不可缺少的要件,所以我们需要先去百度申请我们的APIKey!!! 伸手党,请直接到页面底部获取完整代码! 最近做一个门店查询的内容展示,考虑到用户直观 ...

  4. 百度API ； 很多有用的接口及公用 数据

    百度API : http://apistore.baidu.com/ . 比如手机号码:

  5. 去百度API的百度地图准确叠加和坐标转换的解决方案研究

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 目前项目上如果要使用百度地图,得加载百度的开发包,然后通过百 ...

  6. 利用百度API Store接口进行火车票查询

    火车票查询 项目源码下载链接: Github:https://github.com/VincentWYJ/TrainTicketQuery 博客文件:http://files.cnblogs.com/ ...

  7. 百度api短信开发

    公司原来有一个短信发送的功能,是调用第三方的,但是很不稳定,时不时就收不到短信,但是钱已经扣了.对于这样的事,谁都忍受不了的.于是想找一个稳定短信发送平台,第一想到的是阿里云,百度.在这两个平台上公司 ...

  8. html5获取经纬度，百度api获取街区名，并使用JS保存进cookie

    引用js<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak= ...

  9. 百度API使用--javascript api进行多点定位

    使用百度地图提供的javascript api,给定多点的经纬度坐标,在百度地图上 显示这些坐标点. 其中包括各个点自适应地图显示,自定义坐标点的图标,以及各个点之间添加折线. 实现的效果如下图: 具 ...

随机推荐

  1. 关于 Spring Security OAuth2 中 Feign 调用 Token 问题

    微服务体系中,避免不了服务之间链式调用,一般使用 Feign ,由于使用 Spring Security OAuth2 全局做了安全认证,简单的一种实现方式就是在服务提供方获得 Token 再次通过 ...

  2. restTemplate.postForObject上传文件中文乱码(???.xls)

    一.问题描述 项目中, 使用restTemplate上传文件时, 文件名中文乱码, 一串问号, 源文件名为: 测试中文乱码哦哦哦.zip, 通过restTemplate.postForObject调用 ...

  3. 【原创】使用golang访问windows telnet服务器

    本篇博客记录本次使用golang语言tcp方式进行telnet服务器访问 环境: 1.win7系统telnet服务器,使用地址:192.168.8.189 2.python使用telnetlib库对t ...

  4. 【转】深入理解Android之View的绘制流程

    概述 本篇文章会从源码(基于Android 6.0)角度分析Android中View的绘制流程,侧重于对整体流程的分析,对一些难以理解的点加以重点阐述,目的是把View绘制的整个流程把握好,而对于特定 ...

  5. python模块之random

    python的随机数模块为random模块,可以产生随机的整数或浮点数.但是这是伪随机数,python解释器会维护一些种子数,然后根据算法算出随机数.linux维护了一个熵池,这个熵池收集噪音的信息, ...

  6. 第一册：lesson nineteen。

    原文:tired and thirsty. A:What's the matter,children? B:We are tired and thirsty. A:Sit down,here. Are ...

  7. WPF: 实现带全选复选框的列表控件

    本文将说明如何创建一个带全选复选框的列表控件.其效果如下图:     这个控件是由一个复选框(CheckBox)与一个 ListView 组合而成.它的操作逻辑: 当选中“全选”时,列表中所有的项目都 ...

  8. SpringBoot2.0 redis生成组建和读写配置文件

    @Component 生成组建 @ConfigurationProperties(prefix="redis") 读写redis配置文件 application.propertie ...

  9. 【Java每日一题】20170215

    20170214问题解析请点击今日问题下方的“[Java每日一题]20170215”查看(问题解析在公众号首发,公众号ID:weknow619) package Feb2017; public cla ...

  10. junit单元测试注意的问题

    1.有返回值的方法不能直接测试 2.带参数的方法不能直接测试 3.访问权限在public一下的方法不能直接测试 4.static静态方法不能直接测试 5.不能给出现前四个条件中任意一个的方法添加@Te ...