这个只是入门,详细的还得看官方的文档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. asp.net core mvc上传大文件解决方案

    默认上传文件大小不超过30M 第一个问题: IIS 10.0 详细错误 - 404.13 - Not Found 请求筛选模块被配置为拒绝超过请求内容长度的请求. 服务器上的请求筛选被配置为拒绝该请求 ...

  2. 改变input的值不会触发change事件的解决思路

    通常来说,如果我们自己通过 value 改变了 input 元素的值,我们肯定是知道的,但是在某些场景下,页面上有别的逻辑在改变 input 的 value 值,我们可能希望能在这个值发生变化的时候收 ...

  3. 【Android基础】利用Intent在Activity之间传递数据

    前言: 上一篇文章给大家聊了Intent的用法,如何用Intent启动Activity和隐式Intent,这一篇文章给大家聊聊如何利用Intent在Activity之间进行沟通.   从一个Activ ...

  4. centos 7 linux 安装与卸载 tomcat 7

    一.声明 本文采用操作系统版本: Centos 7 Linux系统 版本源:CentOS-7-x86_64-DVD-1708.iso 官网下载地址:http://isoredirect.centos. ...

  5. Linux笔记总结

    标签: Linux 1. 库  库是一种可执行代码的二进制形式,可以被操作系统载入内存执行.库有两种:静态库(.a..lib)和动态库(.so..dll). a. 静态库   之所以称为[静态库],是 ...

  6. SpringCloud学习6-如何创建一个服务消费者consumer

    上一节如何创建一个服务提供者provider已经启动了一个provider的server,提供用户信息查询接口.接下来,我们启动另一个provider,由于是同一台机器本地测试,我们换一个端口 --s ...

  7. Oracle数据库over函数的使用

    转自:  https://blog.csdn.net/a1065423444/article/details/75635611 over()函数写法over(partition by expr2 or ...

  8. mysql连续聚合

    连续聚合是按时间顺序对有序数据进行聚合的操作. 在下面的救示例中将使用EmpOrders表,该表用于存放每位员工每月发生的订购数量. 运行如下 代码创建EmpOrders表并填充示例数据. CREAT ...

  9. Perl的die和warn函数

    die和warn die可以在出现错误的时候停止程序,并给出消息.默认会输出出错的程序名称和出错行号 warn函数和die函数类似,但和die的区别是不会终止程序 die和warn的参数末尾如果给了\ ...

  10. anoconda包管理汇总

    anoconda默认的seaborn版本是0.8.1 seaborn的最新版本是0.9.0  并且已经没有0.8.1的文档了. 升级anoconda的seaborn版本 进入anoconda prom ...