这个只是入门,详细的还得看官方的文档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. 【jQuery】(2)---Jquery过滤选择器

                         1.基础选择器: 名称 说明 举例 #id 根据元素Id选择 $("divId") 选择ID为divId的元素 element 根据元素的 ...

  2. IdentityServer4（7）- 使用客户端认证控制API访问（客户端授权模式）

    一.前言 本文已更新到 .NET Core 2.2 本文包括后续的Demo都会放在github:https://github.com/stulzq/IdentityServer4.Samples (Q ...

  3. Go基础系列：函数(2)——回调函数和闭包

    回调函数和闭包 当函数具备以下两种特性的时候,就可以称之为高阶函数(high order functions): 函数可以作为另一个函数的参数(典型用法是回调函数) 函数可以返回另一个函数,即让另一个 ...

  4. 翻译：SELECT INTO语句（已提交到MariaDB官方手册）

    本文为mariadb官方手册:SELECT INTO的译文. 原文:https://mariadb.com/kb/en/selectinto/我提交到MariaDB官方手册的译文:https://ma ...

  5. html引用外部js和css

    html引用外部js和css css:<link rel="stylesheet" type="text/css" href="xx.css&q ...

  6. 另类爬虫：从PDF文件中爬取表格数据

    简介   本文将展示一个稍微不一样点的爬虫.   以往我们的爬虫都是从网络上爬取数据,因为网页一般用HTML,CSS,JavaScript代码写成,因此,有大量成熟的技术来爬取网页中的各种数据.这次, ...

  7. PHP开发中bcscale timezone charset的设定

    关于php的开发,有几个细节设定,需要知悉下:在项目的init.php 或 index.php 或 api.php 1. bcscale(18); 表示bc函数,默认小数点位数. 没有设定的话,默认为 ...

  8. 第一册：lesson5-6.

    原文: A:Good morning. B:Good morning,Mr.A. A:This is Miss C. C is a new student.She is Frech. C ,this ...

  9. C#静态成员静态类。

    1. 在静态类中,所包含的所有成员必须是静态的.但不是所有静态成员都必须写在静态类中.       实例成员属于具体的对象,静态成员是属于类的.所以访问静态成员的时候不能通过对象来访问,只能通过类名直 ...

  10. 高德地图Javascript API设置域名白名单

    在涉及到GPS地图相关应用的开发过程中,我们需要在高德开放平台注册相应的账号,并设置好相应应用来获取调用的Key值,该Key值直接放入到网站前端页面,针对任何人来说都可看到,因此我们防止他人盗用你的K ...