这个只是入门,详细的还得看官方的文档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. [原创]K8Cscan插件之FTP弱口令扫描

    [原创]K8 Cscan 大型内网渗透自定义扫描器 https://www.cnblogs.com/k8gege/p/10519321.html Cscan简介:何为自定义扫描器?其实也是插件化,但C ...

  2. mysql 开发基础系列14 字符集

    字符集是一套文字符号及其编码,比较规则的集合.第一个字符集是ascll(american standard code for information interchange).  1.  选择合适的字 ...

  3. mysql 开发基础系列9 存储引擎 MyISAM 介绍

    MyISAM是mysql 默认存储引擎,它不支持事务,外键.但访问速度快,对事务完整性没有要求或者以select,insert 为主的应用基本上都可以使用这个引擎.每个MyISAM在磁盘上存储成3个文 ...

  4. 近期遇到的计(算)算(法)题及解(JavaScript)

    以下是近期遇到的三个计(算)算(法)题... 提到这些问题的时候简单理了下思路,后面又以JavaScript代码实现并顺便记个笔记... 至于是什么场景下遇到这些题的么... :) 问题一:从无序数组 ...

  5. 西安活动 | 9月15号 "拥抱开源, 又见.NET" 线下交流活动

    随着.NET Core的发布和开源,.NET又重新回到了人们的视野.除了开源.跨平台.高性能以及优秀的语言特性,越来越多的第三方开源库也出现在了github上——包括ML.NET机器学习.Xamari ...

  6. jvm详情——5、选择合适的垃圾收集算法

    回收器选择JVM给了三种选择:串行收集器.并行收集器.并发收集器,但是串行收集器只适用于小数据量的情况,所以这里的选择主要针对并行收集器和并发收集器. 默认情况下,JDK5.0以前都是使用串行收集器, ...

  7. CNN 模型压缩与加速算法综述

    本文由云+社区发表 导语:卷积神经网络日益增长的深度和尺寸为深度学习在移动端的部署带来了巨大的挑战,CNN模型压缩与加速成为了学术界和工业界都重点关注的研究领域之一. 前言 自从AlexNet一举夺得 ...

  8. Java 容器源码分析之 Deque 与 ArrayDeque

    Queue 也是 Java 集合框架中定义的一种接口,直接继承自 Collection 接口.除了基本的 Collection 接口规定测操作外,Queue 接口还定义一组针对队列的特殊操作.通常来说 ...

  9. ZAB协议简介

    Zookeeper 使用 Zookeeper Atomic Broadcast (ZAB) 协议来保障分布式数据一致性. ZAB是一种支持崩溃恢复的消息广播协议,采用类似2PC的广播模式保证正常运行时 ...

  10. SHELL脚本--变量(基础)

    bash&shell系列文章:http://www.cnblogs.com/f-ck-need-u/p/7048359.html 变量存在于内存中.假设变量str,设置或修改变量属性时,不带$ ...