百度地图JavaScript API 学习入门指南

前提

因为最近分配的任务中包含了别人写的有关百度地图API的代码,加上自己从未接触过这方面的知识,所以为了能在短时间内熟悉和消化别人写的代码,于是就花了一整天的时间,专门学习了一下百度地图JavaScript API。虽然说是 从零开始学起,但是在官方提供的开发指南示例DEMO、以及JavaScript API v2.0类参考的帮助下,还是收获了不少东西。

百度地图开放平台 | 百度地图API SDK | 地图开发
JavaScript API 极速版-百度地图API - Wiki

产品简介

  • 百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口,可帮助您在网站中构建功能丰富、交互性强的地图应用,支持PC端和移动端基于浏览器的地图应用开发,且支持HTML5特性的地图开发。
  • 百度地图JavaScript API支持HTTPHTTPS,免费对外开放,可直接使用。
  • 接口使用无次数限制。
  • 在使用前,您需先申请密钥(ak)才可使用。【这句话很重要】
  • 在您使用百度地图JavaScript API之前,请先阅读百度地图API使用条款。任何非营利性应用请直接使用,商业应用请参考使用须知。

使用方法

  1. 注册百度账号
  2. 申请成为百度开发者(如下图所示)
  3. 获取服务密钥(ak)
  4. 使用相关服务功能

开发者注册

注:由于个人原因,可能之前用手机号注册了其他百度账号,导致出现了重复注册的问题,已经申诉了。
但目前为止还不能进行注册,因此直接就使用了项目中别人用到的密钥。

//直接通过script标签引用百度地图API文件就行了,然后就可以调用百度地图的API了
<script src="http://api.map.baidu.com/api?v=2.0&ak=3ecea51f560650b1ed8a4b99808f52e8">script>
  • 其中,v是指版本号,v=2.0指的是使用的是百度地图JavaScript API 2.0版本。当然了,还有3.0的版本。
  • 然后,ak指的是密匙。ak=你自己的密匙;
  • 如果嫌注册申请麻烦,直接将下面的密匙复制粘贴使用就行了。
  • ak=3ecea51f560650b1ed8a4b99808f52e8

请注意:
1. JavaScript API v3.0 是在 v2.0的基础上进行开发的,并针对2.0的一些接口进行了升级,为开发者提供更完善的服务。
2. v3.0的绝大部分接口向下兼容,开发者仅需要修改版本参数(v=3.0) 就可以切换到JavaScript API v3.0版本。
3. 具体版本差异请参考服务版本说明书。

注册方式

百度地图JavaScript API 学习入门指南_第1张图片

请直戳这里:入门指南之账号和获取密匙
请直戳这里:入门指南之使用须知
请直戳这里:入门指南之百度地图的“Hello, World”
请直戳这里:入门指南之坐标转换说明

如何使用

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

示例:

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





<html>

<head>
    <meta charset="UTF-8">
    
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <title>Hello,Worldtitle>
    <style type="text/css">
    html {
        height: 100%
    }
    body {
        height: 100%;
        margin: 0px;
        padding: 0px
    }
    /*第六步:设置容器样式大小,使地图充满整个浏览器窗口*/
    #container {
        height: 100%
    }
    style>

    
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=3ecea51f560650b1ed8a4b99808f52e8">script>
    
head>

<body>
    
    <div id="container">div>

    
    <script type="text/javascript">

    /* 1.创建地图实例 */
    //(1) 命名空间:API使用BMap作为命名空间,所有类均在该命名空间之下。比如:BMap.Map、BMap.Control、BMap.Overlay。
    //(2)位于BMap命名空间下的Map类表示地图,通过new操作符可以创建一个地图实例。其参数可以是元素id也可以是元素对象。
    var map = new BMap.Map("container");
    /*注意:在调用此构造函数时,应确保容器元素已经添加到地图上。*/


    /* 2.创建点坐标 */ 
    // 这里我们使用BMap命名空间下的Point类来创建一个坐标点。
    var point = new BMap.Point(116.404, 39.915);
    // Point类描述了一个地理坐标点,其中116.404表示经度,39.915表示纬度。(为天安门坐标)

    /* 3.地图初始化,同时设置地图展示(缩放)级别*/
    //在创建地图实例后,我们需要对其进行初始化,BMap.Map.centerAndZoom()方法要求设置中心点坐标和地图级别。
    map.centerAndZoom(point, 15);
    /*注意:地图必须经过初始化才可以执行其他操作。*/

    /*至此,我们就快速创建了一张以天安门为中心的地图~*/
    script>

    

    

    

    
    

    
    
body>

html>

地图的其他配置选项可参考——Map类参考入口

你可能感兴趣的:(百度地图API,如何使用百度地图JS,API,百度地图JS,API入门指南,初学百度地图JS,API)