初始百度地图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

相关阅读:
深度学习100例-卷积神经网络（CNN）实现mnist手写数字识别 | 第1天
读 RocketMQ 源码，学习并发编程三大神器
OpenCV读取图像时按照BGR的顺序HWC排列,PyTorch按照RGB的顺序CHW排列
excel使用小笔记
SVN 修改URL路径-使用重新定位(relocate)命令和找不到问题解决
【web前端】＜meta＞标签
用Vue编写一个简单的仿Explorer文件管理器
Spring 趣玩
非父子组件通信-发布订阅模式
数据结构——查找

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