初始百度地图API

官方网址

步骤

注册百度账号申请成为开发者

在这里插入图片描述

应用创建

在这里插入图片描述

应用创建配置

应用名
类型浏览器服务器 …
使用相关服务
设置白名单测试配置 * 就行

在这里插入图片描述

获取服务密钥AK

在这里插入图片描述

案例代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>初识百度地图API</title>
		<!-- 适应移动端页面展示  -->
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
		<!-- 设置容器样式大小，使地图充满整个浏览器窗口：  -->
		<style>
			html{height:100%}    
			body{height:100%;margin:0px;padding:0px}    
			#container{height:100%} 
		</style>
	</head>
	<body>
		 <!-- 1、定义承载地图的容器  地图需要一个HTML元素作为容器，这样才能展现到页面上。这里我们创建了一个div元素。   -->
		 <div id="container"></div>
		 <!--  2、引用百度API的文件   设置 个人密码 ak=您的密钥 -->
		 <script src="http://api.map.baidu.com/api?v=3.0&ak=Keg2bWH0ghGgxSPakTv4fg1rerafMuqr"></script>
		 <!-- 3、创建地图实例 -->
		 <script>
			 /*  位于BMapGL命名空间下的Map类表示地图，通过new操作符可以创建一个地图实例。其参数可以是元素id也可以是元素对象。
				注意：
				1、在调用此构造函数时应确保容器元素已经添加到地图上；
				2、命名空间 API GL版使用BMapGL作为命名空间，所有类均在该命名空间之下，比如：BMapGL.Map、BMapGL.Control、BMapGL.Overlay；
			 */
			 // var map = new  BMapGL.Map("container");
			 let map = new BMap.Map('container');
			 
			 /* 创建中心点坐标  ->  需使用百度BD09坐标， 其他坐标（ WGS84、GCJ02）需要转换
			 这里我们使用BMapGL命名空间下的Point类来创建一个坐标点。
			 Point类描述了一个地理坐标点，其中116.404表示经度，39.915表示纬度。（为天安门坐标） */
			 // var point = new BMapGL.Point(116.404, 39.915);
			let point = new BMap.Point(116.404, 39.915)
			  
			 /* 地图初始化，同时设置地图展示级别
			 在创建地图实例后，我们需要对其进行初始化，BMapGL.Map.centerAndZoom()方法要求设置中心点坐标和地图级别。
			  地图必须经过初始化才可以执行其他操作
			 */
			 map.centerAndZoom(point, 15); 
		 </script>
	</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

效果展示

在这里插入图片描述

注意事项

初次引用百度API的文件时候发现异常 BMapGL is not defined

界面无法展示百度地图的效果

在这里插入图片描述
当前情况一般情况下都是引入关键字或者 JS文件路径引入错误而引发

1、首先重新复制AK密钥
2、检查关键字
以上无问题

仔细观察API中提供的DOM 发现引入文件时有绑定对应的版本指定 v=1.0

此时才发现时自身版本引入错误导致改对象无法生效

解决方案

BMapGL引入版本是1.0

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

BMap引入版本是2.0 .3.0

<script src="http://api.map.baidu.com/api?v=2.0&ak=您的秘钥"></script>
1

参考教程

博客参考案例-1

博客参考案例-2

相关阅读:
LeetCode题解：7. 整数反转，迭代，JavaScript，详细注释
easyExcel生成动态表头
【百元级商用RV1106 Linux开发板只需69元】Luckfox Pico Pro/Luckfox Pico Max 39元版本大升级版本
前端 JS 经典：typeof 和 instanceof 区别
【2023秋招面经】4399 前端二面-hr面（20min）
论文笔记：DETR: End-to-End Object Detection with Transformers (from 李沐老师and朱老师)
代码随想录算法训练营第60天 | 一刷结束篇 84.柱状图中最大的矩形
LeetCode 51 N皇后回溯
安防监控/视频汇聚/云存储/AI智能视频分析平台EasyCVR下级海康设备无法级联是什么原因？
[学习笔记]TypeScript查缺补漏（一）：类

原文地址：https://blog.csdn.net/Klhz555/article/details/126173379