这个只是入门,详细的还得看官方的文档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. Django--缓存设置

    Django缓存机制 一. 缓存介绍 缓存是将一些常用的数据保存内存或者memcache中,在一定的时间内有人来访问这些数据时,则不再去执行数据库及渲染等操作,而是直接从内存或memcache的缓存中 ...

  2. 图片base64上传时可能遇到的问题

    base64上传图片时服务器接到的值可能会丢失字符串 解决方法如下:(分为单个上传和多个上传) <?php $BASE_DIR = "../"; //文件上传 $img = ...

  3. Linux编程 15 文件权限(用户管理 useradd,userdel,usermod,passwd,chpasswd,chsh, chfn,chage)

    一. 概述  在上一篇中讲到了与用户账户有关的二个文件passwd和shadow,以及useradd工具的介绍.这篇接着讲useradd+参数,删除用户,修改用户的演示. 1. 删除用户userdel ...

  4. 微信小程序ios上时间字符串转换为时间戳时会报错，在开发工具上和安卓手机上运行成功

    给定一个时间字符串  var time="2017-02-27 16:42:53" js有三种转换为时间戳的方法: 1.var timestamp = Date.parse(tim ...

  5. 08 训练Tensorflow下围棋

    这里介绍一下开源项目Mugo,它基于Tensorflow,可以使用sgf的棋谱训练围棋机器人,跟你下围棋,这里直接给出本人修改完善好的项目,只介绍一下用法. 链接:http://pan.baidu.c ...

  6. 想入职阿里的Java开发者必看，阿里巴巴面试官实战经验分享！

    最近社区Java技术进阶群的小伙伴总是会问,如何面试阿里Java技术岗,需要什么条件,做哪些准备:小编就这些问题找到了阿里技术团队中在一线真正带Java开发团队并直接参与技术面试的专家,分享了自身在筛 ...

  7. Linux常用命令之压缩和解压缩命令

    目录 1.压缩解压缩格式 .gz 一.将文件压缩为 .gz 格式,只能压缩文件:gzip 二.将 .gz 文件解压:gunzip 2.压缩解压缩格式 .tar.gz 一.将文件或目录压缩为 .tar. ...

  8. 为什么LINQ to XML的性能要优于XmlDocument？

    一直很忙,压了很多贴,今天发一篇吧.后面的看心情吧. 今天群里有人问如何解析web.config方便,然后我就推荐了Linq to XML,然后就有人说“我宁可XmlDocument,再SeleteN ...

  9. go使用rpc

    RPC是远程过程调用的缩写(Remote Procedure Call),通俗地说就是调用远处的一个函数,是分布式系统中不同节点间流行的通信方式.Go语言的标准库提供了一个简单的RPC实现 serve ...

  10. Nacos系列：基于Nacos的配置中心

    前言 在看正文之前,我想请你回顾一下自己待过的公司都是怎么管理配置的,我想应该会有以下几种方式: 1.硬编码 没有什么配置不配置的,直接写在代码里面,比如使用常量类 优势:对开发友好,开发清楚地知道代 ...