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

最新推荐文章于 2022-10-20 15:46:32 发布

置顶 monkeyfly007

最新推荐文章于 2022-10-20 15:46:32 发布

阅读量1.4k

点赞数 1

分类专栏：百度地图API 文章标签：如何使用百度地图JS API 百度地图JS API入门指南初学百度地图JS API

本文链接：https://blog.csdn.net/tel13259437538/article/details/79873647

版权

百度地图API 专栏收录该内容

10 篇文章

订阅专栏

前提

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

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

产品简介

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

使用方法

开发者注册

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

//直接通过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. 具体版本差异请参考服务版本说明书。

注册方式

这里写图片描述

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

如何使用

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

示例：

//如下代码可以实现一个简单完整的全屏展示的地图Demo：
<!-- 下面分步介绍如何快速开始地图开发： -->
<!-- 第一步:申请账号和获取ak（密匙） 地址：http://lbsyun.baidu.com/apiconsole/key -->
<!-- 使用方法：注册百度账号、申请成为百度开发者、获取服务密匙（ak）、使用相关服务功能
        注意：必须先申请密钥（ak）才可使用该服务。
 -->
<!-- 第二步：准备页面。建议使用最新的符合HTML5规范的文档声明 -->
<!DOCTYPE html>
<html>

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

    <!-- 第四步：引用百度地图API文件 -->
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=3ecea51f560650b1ed8a4b99808f52e8"></script>
    <!--v2.0版本的引用方式：src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"-->
</head>

<body>
    <!-- 第五步：创建地图容器元素 （地图需要一个HTML元素作为容器，这样才能展现到页面上。）-->
    <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>

    <!--对于刚开始接触百度地图API的同学来说，在本节的知识中，下面的仅作为了解，但是后面会用到。-->

    <!-- 地图配置与操作 -->

    <!-- 当地图被实例化并完成初始化以后，就可以与其进行交互了。 -->

    <!-- 1、API中的地图对象支持鼠标拖拽、滚轮缩放、双击放大等交互功能。你也可以通过修改配置来改变这些功能。 -->
    <!-- 比如，默认情况下地图不支持鼠标滚轮缩放操作，因为这样可能会影响整个页面的用户体验。
    但是，如果你希望在地图中使用鼠标滚轮控制缩放，则可以调用map.enableScrollWheelZoom方法来开启。
    具体的配置选项可以在Map类参考中找到。
     -->

    <!-- 2、此外，您还可以通过编程的方式与地图交互。 -->
    <!-- Map类提供了若干修改地图状态的方法。例如：setCenter()、panTo()、zoomTo()等等。 -->
</body>

</html>