百度地图API的使用

已于 2023-11-08 11:16:55 修改
阅读量10w+ 收藏 161
点赞数 27
分类专栏： 前端知识 数据大屏 文章标签： 百度 php 前端
于 2023-02-16 23:49:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/stc_ljc/article/details/129071908
版权

文章目录

一、百度地图–作者前言

这篇文章主要想让读者掌握：
百度地图官网 API
百度地图JavaScript API
当前的位置在网页中显示，插入地图 拖拽 点击事件。
应用场景：网页插入百度地图
在这里插入图片描述
注意：不关注定位、距离、公交，这些功能一般结合移动端GPS实现

二、百度地图如何使用

第一步：进入官网

百度地图JavaScript API
直接搜百度地图或者百度地图开放平台，或者直接点击上方链接。
【官网】https://lbsyun.baidu.com/
在这里插入图片描述

第二步：进入开发文档

百度地图JavaScript API
或者直接点击上方链接。
【百度地图JavaScript API】https://lbsyun.baidu.com/index.php?title=jspopularGL
在这里插入图片描述
在这里插入图片描述

第三步：申请百度开发者密钥

申请百度开发者密钥网址
【申请百度开发者密钥网址】https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/getkey
在这里插入图片描述

获取账户和密钥

  1. 注册百度账号
    申请百度账号网址
    【申请百度账号网址】https://passport.baidu.com/v2/?login
    先注册百度账号，如果有的话，直接登录即可或者采用第三方登录，登录完成进入下一步
    在这里插入图片描述

  2. 申请成为百度开发者
    申请成为百度开发者网址
    【[申请成为百度开发者网址】https://lbsyun.baidu.com/apiconsole/user/choose
    按照步骤走就ok了
    在这里插入图片描述

在这里插入图片描述

  1. 获取服务密钥（通行证）
    获取密钥网址
    【[获取密钥网址】https://lbsyun.baidu.com/apiconsole/key/create#/home
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    也可以配置为*，这样全域可以访问，但是缺点就是不安全
    在这里插入图片描述

应用名称最好是英文，一定要选择游览器端
Referer白名单可以把你的域名放里面，如果上限域名还没有，可以放自己电脑的IP地址，ip地址可以通过cmd输入ipconfig获取，如果你想放多个，可以以逗号隔开，如上图所示
在这里插入图片描述

第四步：插入百度地图

插入百度地图网址
【插入百度地图网址】https://lbsyun.baidu.com/apiconsole/key/create#/homehttps://lbsyun.baidu.com/index.php?title=jspopularGL/guide/helloworld
在这里插入图片描述

4.1申请密钥=>已完成
4.2准备页面

创建一个html页面

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

在这里插入图片描述

4.3创建容器和创建地图实例以及相关设置

写容器，设置大小
创建地图容器元素
地图需要一个HTML元素作为容器，这样才能展现到页面上。这里我们创建了一个div元素。

<body>
  <!-- 创建地图容器元素 -->
  <div id="container"></div> 
</body>

设置容器样式

  <style>
    html{height:100%}    
    body{height:100%;margin:0px;padding:0px}    
    #container{height:100%}    
  </style>

引用百度地图API文件

<script src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=您的密钥">
</script>

地图实例以及相关设置

  • 创建地图实例 => 位于BMapGL命名空间下的Map类表示地图，通过new操作符可以创建一个地图实例。其参数可以是元素id也可以是元素对象。
  • 设置中心点坐标 => 我们使用BMapGL命名空间下的Point类来创建一个坐标点。Point类描述了一个地理坐标点，其中116.404表示经度，39.915表示纬度。（为天安门坐标）
  • 地图初始化，同时设置地图展示级别 => 创建地图实例后，我们需要对其进行初始化，BMapGL.Map.centerAndZoom()方法要求设置中心点坐标和地图级别。
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    html{height:100%}    
    body{height:100%;margin:0px;padding:0px}    
    #container{height:100%}    
  </style>
</head>

<script src="http://api.map.baidu.com/api?type=webgl&v=1.0&ak=webgl&ak=IVrxhGKViMttmN3Mr0GntQHZUCwS30W4"></script>
<body>
  <!-- 创建地图容器元素 -->
  <div id="container"></div> 
  
</body>
<script>
  // 创建地图实例=> 参数可以是元素id也可以是元素对象。
  var map = new BMapGL.Map("container");
  // 设置中心点坐标(经纬度)=>天安门坐标
  var point = new BMapGL.Point(116.404, 39.915);
  // 地图初始化，同时设置地图展示级别
  map.centerAndZoom(point, 15); 
  
</script>
</html>

这样就可以看到我们的地图放到页面中了，地图初始化完成默认有拖拽功能
在这里插入图片描述
point 位置点
15是级别(范围3-19),数值越小，地图看的越远越全，值越大，地图看的越清晰
在这里插入图片描述

三、百度地图添加控件(基本控件)

鼠标滚轮

鼠标滚轮缩放
【鼠标滚轮缩放】https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/show
在这里插入图片描述
开启鼠标缩放配置代码，默认鼠标滚轮是关闭你的，需要我们配置才能才起

//开启鼠标滚轮的事件
map.enableScrollWheelZoom(true);     //鼠标滚轮true 缩放 false不缩放

配置完成可通过鼠标滚轮来控制地图，向上滑放放大，向下则放小
在这里插入图片描述

添加控件

添加控件
【添加控件】https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/widget
在这里插入图片描述
官方提供的控件
在这里插入图片描述

  • 平移缩放控件(NavigationControl)
    PC端默认位于地图左上方，它包含控制地图的平移和缩放的功能
  // 添加控件平移缩放控件
  map.addControl(new BMapGL.NavigationControl());

在这里插入图片描述

marker标注(需要掌握)

添加标注，点、线、面
【添加控件】https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/widget
标注可以加入某种形状，或者定义某一种类型，可以使用map.addOverlay方法向地图添加覆盖物，也可以使用map.removeOverlay方法移除覆盖物。
在这里插入图片描述

1、地图添加标注marker

点 Marker 表示地图上的点，可自定义标注的图标(最常用)
添加标注语法

var point = new BMapGL.Point(116.404, 39.915);   
var marker = new BMapGL.Marker(point);        // 创建标注   
map.addOverlay(marker);                     // 将标注添加到地图中

demo完整代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    html {
      height: 100%
    }

    body {
      height: 100%;
      margin: 0px;
      padding: 0px
    }

    #container {
      height: 100%
    }
  </style>
</head>

<script src="http://api.map.baidu.com/api?type=webgl&v=1.0&ak=webgl&ak=IVrxhGKViMttmN3Mr0GntQHZUCwS30W4"></script>
<body>
  <!-- 创建地图容器元素 -->
  <div id="container"></div>

</body>
<script>
  // 1.创建地图
  var map = new BMapGL.Map("container");
  // 2.设置中心点
  var point = new BMapGL.Point(116.404, 39.915);
  // 3.地图初始化，同时设置地图展示级别
  // point 位置点 15是级别(范围3-19)
  map.centerAndZoom(point, 11);
  // 4.数据滚轮
  map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

  // 5.地图添加标注
  // 点	Marker	表示地图上的点，可自定义标注的图标(最常用)
  var marker = new BMapGL.Marker(point);  // 创建标注   
  map.addOverlay(marker);  // 将标注添加到地图中
</script>
</html>
效果

在这里插入图片描述

2、更改地图标注marker样式–定义标注图标

通过Icon类可实现自定义标注的图标，下面示例通过参数MarkerOptions的icon属性进行设置，您也可以使用marker.setIcon()方法。
完整icon类

var myIcon = new BMapGL.Icon("markers.png", new BMapGL.Size(23, 25), {   
    // 指定定位位置。  
    // 当标注显示在地图上时，其所指向的地理位置距离图标左上   
    // 角各偏移10像素和25像素。您可以看到在本例中该位置即是  
    // 图标中央下端的尖角位置。   
    anchor: new BMapGL.Size(10, 25),   
    // 设置图片偏移。  
    // 当您需要从一幅较大的图片中截取某部分作为标注图标时，您  
    // 需要指定大图的偏移位置，此做法与css sprites技术类似。   
    imageOffset: new BMapGL.Size(0, 0 - 25)   // 设置图片偏移   
});     
    // 创建标注对象并添加到地图  
var marker = new BMapGL.Marker(point, {icon: myIcon});   
map.addOverlay(marker);

根据需求使用icon类
new BMapGL.Icon(第一个参数图片的路径,第二个参数是图片的大小)
创建标注对象并添加到地图

var marker = new BMapGL.Marker(point, {icon: myIcon});   
map.addOverlay(marker);

素材图片地址
在这里插入图片描述
demo完整代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    html {
      height: 100%
    }

    body {
      height: 100%;
      margin: 0px;
      padding: 0px
    }

    #container {
      height: 100%
    }
  </style>
</head>

<script src="http://api.map.baidu.com/api?type=webgl&v=1.0&ak=webgl&ak=IVrxhGKViMttmN3Mr0GntQHZUCwS30W4"></script>

<body>
  <!-- 创建地图容器元素 -->
  <div id="container"></div>

</body>
<script>
  // 1.创建地图
  var map = new BMapGL.Map("container");
  // 2.设置中心点
  var point = new BMapGL.Point(116.404, 39.915);
  // 3.地图初始化，同时设置地图展示级别
  // point 位置点 15是级别(范围3-19)
  map.centerAndZoom(point, 11);
  // 4.数据滚轮
  map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

  // 5.地图添加标注
  // 点	Marker	表示地图上的点，可自定义标注的图标(最常用)
  // var marker = new BMapGL.Marker(point);  // 创建标注   
  // map.addOverlay(marker);  // 将标注添加到地图中

  // 自定义图片 通过Icon类可实现自定义标注的图标
  var myIcon = new BMapGL.Icon("img/260.jpg", new BMapGL.Size(23, 25))
  // new BMapGL.Icon(第一个参数图片的路径,第二个参数是图片的大小)
  // 创建标注对象并添加到地图  
  var marker = new BMapGL.Marker(point, { icon: myIcon });
  map.addOverlay(marker); 
</script>

</html>
效果在这里插入图片描述
2、标注添加监听事件

语法

marker.addEventListener("click", function(){   
    alert("您点击了标注");   
});

demo完整代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    html {
      height: 100%
    }

    body {
      height: 100%;
      margin: 0px;
      padding: 0px
    }

    #container {
      height: 100%
    }
  </style>
</head>

<script src="http://api.map.baidu.com/api?type=webgl&v=1.0&ak=webgl&ak=IVrxhGKViMttmN3Mr0GntQHZUCwS30W4"></script>

<body>
  <!-- 创建地图容器元素 -->
  <div id="container"></div>

</body>
<script>
  // 1.创建地图
  var map = new BMapGL.Map("container");
  // 2.设置中心点
  var point = new BMapGL.Point(116.404, 39.915);
  // 3.地图初始化，同时设置地图展示级别
  // point 位置点 15是级别(范围3-19)
  map.centerAndZoom(point, 11);
  // 4.数据滚轮
  map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

  // 5.地图添加标注
  // 点	Marker	表示地图上的点，可自定义标注的图标(最常用)
  // var marker = new BMapGL.Marker(point);  // 创建标注   
  // map.addOverlay(marker);  // 将标注添加到地图中

  // 自定义图片 通过Icon类可实现自定义标注的图标
  var myIcon = new BMapGL.Icon("img/260.jpg", new BMapGL.Size(23, 25))
  // new BMapGL.Icon(第一个参数图片的路径,第二个参数是图片的大小)
  // 创建标注对象并添加到地图  
  var marker = new BMapGL.Marker(point, { icon: myIcon });
  map.addOverlay(marker);

  // 监听事件
  marker.addEventListener("click", function () {
    alert("您点击了标注");
  });
</script>

</html>

效果
在这里插入图片描述

还在更新中，可以点个关注或者收藏哦

总结

如果这篇【文章】有帮助到你💖，希望可以给我点个赞👍，创作不易，如果有对前端端或者对python感兴趣的朋友,请多多关注💖💖💖，咱们一起探讨和努力！！！
👨‍🔧 个人主页 : 前端初见

前端初见
关注
  • 27
    点赞
  • 踩
  • 161
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
百度地图api教程
07-15
百度地图api大全，快速上手百度地图，了解个api的内容
调用百度地图 API 的步骤详解
2301_78276982的博客
01-04 906
这些资料，对于【软件测试】的朋友来说应该是最全面最完整的备战仓库，这个仓库也陪伴上万个测试工程师们走过最艰难的路程，希望也能帮助到你！
JS使用百度地图API自动获取地址和经纬度操作示例
10-17
主要介绍了JS使用百度地图API自动获取地址和经纬度操作,结合实例形式分析了javascript与百度地图API接口交互实现获取地址与经纬度相关操作技巧,需要的朋友可以参考下
百度地图API的使用教程以及案例，费时6个月成功入职阿里
最新发布
m0_61331237的博客
03-23 323
四、添加控件五、标注。
如何调用百度地图API
.
06-15 1万+
百度地图API提供了多种服务，包括地图展示、路线规划、地点搜索、实时交通等。
快速调用百度AI开放平台的API，以OCR通用文字识别为例（封装函数进行连续调用）
荆鹏的博客
09-07 3230
（最新保姆级教程）百度开放平台允许开发者访问和利用百度的各种服务和功能，包括语音识别、人脸识别、文字识别、自然语言处理等等。这些API能够满足我们绝大部分需求，来供我们学习和使用。本文就OCR文字识别为例，详细介绍新手小白如何调用百度开放平台的API。
百度地图api-基本用法总结
星银色飞行船的博客
02-11 1万+
百度地图api的一些常用方法
百度地图API使用方法详解
12-18
最近做了个项目，其中项目中有个需求需要用到百度地图进行导航，通过查阅相关资料参考百度地图api完成了一个例子。 示例一： API地址：http://developer.baidu.com/map/jsdemo.htm#a1_2 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type
web前端JavaScript嵌入百度地图API的方法 最详细
热门推荐
管乐明的博客
04-13 1万+
web前端JavaScript嵌入百度地图API最详细的方法一、申请成为百度开发者，获得使用地图API接口的权限，获取（AK）码。二、实现首图效果（可以参考开发者指南）1. 根据Hello World 手册操作2. 将代码块写入Demo中3. 开启鼠标滚轮缩放4. 添加标注 并且通过标注获取当前位置经纬度5. 启用信息窗口6. 自定义信息窗口三、去除地图左下角logo标志级文字四、更多功能 先看效果图 一、申请成为百度开发者，获得使用地图API接口的权限，获取（AK）码。 打开百度地图开放平台 打开网址
Android 百度地图开发（一）--- 申请API Key和在项目中显示百度地图
移动编程
09-07 757
转载请注明地址http://blog.csdn.net/xiaanming/article/details/11171581 最近自己想研究下地图，本来想研究google Map，但是申请API key比较坑爹，于是从百度地图入手，其实他们的用法都差不多，本篇文章就带领大家在自己的Android项目中加入百度地图的功能，接下来我会写一系列关于百度地图的文章，欢迎大家到时候关注！ 一 申...
百度地图API的使用(附案例)
xiaolu567的博客
10-22 5317
百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口，可帮助您在网站中构建功能丰富、交互性强的地图应用，支持PC端和移动端基于浏览器的地图应用开发，且支持HTML5特性的地图开发。我们直接把文档内的代码cv过来,加上秘钥就可以直接使用地图了。原理跟地图路线规划一样,添加两个标注点,根据标注点来规划路线。那么我们就可以创建2个标注点来设计步行路线。我们可以拖动标注点来获取到标注点的坐标。我们向地图添加标注点和信息窗口。选择浏览器端,白名单输入*我们已经学会使用标注点了。
使用百度地图api实现根据地址查询经纬度
09-04
主要介绍了使用百度地图api实现根据地址查询经纬度的方法，附上实例，推荐给有需要的小伙伴们。
百度地图接口
10-09
百度地图接口,比较详细的注释,适合新人朋友学习,谢谢! 效果图地址:http://blog.csdn.net/love_xiolan/article/details/52769082
leaflet加载百度地图底图
08-11
融合leaflet和百度地图底图
百度地图API教程
08-16
// 定义一个控件类，即function    function ZoomControl(){      // 设置默认停靠位置和偏移量      this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;      this.defaultOffset = new BMap.Size(10, 10);    }      // 通过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";      // 绑定事件，点击一次放大两级   
百度地图api使用模板
06-30
将自己的密钥添加到文档，并修改相应的api版本号，最后将文件后缀更改未html，即可正常运行
百度地图API使用
04-22
主要对百度地图API的使用，其中包含了使用的代码。主要是
百度地图api使用例子
04-12
通过调用百度地图API咋子前台页面展示自己的地理位置信息并且如数据库 ，通过日期查询，连成轨迹。
python 百度地图api
08-09
百度地图提供了Python SDK，可以方便地使用百度地图API进行地图相关的操作。您可以通过以下步骤来使用百度地图API： 1. 首先，您需要在百度地图开放平台上创建一个应用，获取到您的应用AK（Access Key），用于身份验证和访问API。 2. 然后，您可以在Python项目中安装百度地图SDK，可以使用pip命令进行安装： ``` pip install baidu-aip ``` 3. 在您的Python代码中，导入相关的模块： ```python from aip import AipMap ``` 4. 创建一个AipMap对象，并使用您的应用AK进行初始化： ```python app_id = 'your_app_id' api_key = 'your_api_key' secret_key = 'your_secret_key' client = AipMap(app_id, api_key, secret_key) ``` 5. 通过AipMap对象调用相应的接口方法，例如搜索地点、获取地点详情、地理编码等。具体的接口和参数可以参考百度地图开放平台的文档。 这样，您就可以在Python中使用百度地图API进行地图相关的操作了。请注意，使用API时需要遵守百度地图开放平台的相关规定和限制。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端初见

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值