申请百度地图开发者AK和基本使用

news2025/1/16 21:49:52

前言

  • 有需求就会有市场,百度地图也会开放一些免费的Api。来提供一些基本的地图服务。

  • 今天我们讲解的是百度地图申请AK过程,和申请完之后基本的使用,方便大家日后有需要浏览。

AK-申请

1.首先我们学习一个技术最直接的是去看官方文档,大家可以搜索百度地图开放平台也可以通过下面链接进去

官网

2.进到官网

3.点击控制台,如果没登录会跳到登录页 用百度扫一扫直接登录

4.进去之后页面应用管理-我的应用-创建应用

5.应用名称:取个相关的项目名 类型选择浏览器端 白名单填个 * 就可以

注意:第一次申请Ak 它会让你去完善相关信息描述(用来描述AK用来干什么)如实描述一般都会通过审核

6.创建成功之后


小结:

但我们看到这个页面就说明我们的AK申请成功了,AK有什么用。AK就相当于我们百度地图的身份标识,也会跟实名信息绑在一起,只能用于正常开发(不能非法使用)。但我们有了AK之后就可以参考开发文档中来调用百度地图了。也可以用于Vue-baidu-map 后面文章会讲

官方文档

废话不多说直接上代码

 

注意:一般你复制过来他会报一个错误什么为not defined,仔细观察你就会发现是因为没有加https:导致没有获取到所以就是这个报错,把这个加上就行了(注意不要忘记了后面的:)

<!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="text/css">
      body,
      html,
      #allmap {
        width: 100%;
        height: 100%;
        overflow: hidden;
        margin: 0;
        font-family: '微软雅黑';
      }
    </style>
    <script
      type="text/javascript"
      src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=你申请的AK"
    ></script>
    <title>地图展示</title>
  </head>
  <body>
    <div id="allmap"></div>
  </body>
</html>
<script type="text/javascript">
  // GL版命名空间为BMapGL
  // 按住鼠标右键,修改倾斜角和角度
  var map = new BMapGL.Map('allmap') // 创建Map实例
  map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11) // 初始化地图,设置中心点坐标和地图级别
  map.enableScrollWheelZoom(true) //开启鼠标滚轮缩放
</script>

 去除右下角百度图标

// 去除百度地图的图标 根据实际情况看是否要加样式穿透(::v-deep)
    ::v-deep .anchorBL {
      display: none !important;
    }

总结:

经过这一趟流程下来相信你也对 申请百度地图开发者AK和基本使用 有了初步的深刻印象,但在实际开发中我 们遇到的情况肯定是不一样的,所以我们要理解它的原理,万变不离其宗。加油,打工人!

什么不足的地方请大家指出谢谢 -- 風过无痕

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/409401.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

ES6中新语法:解构

目录 解构 1.解构初了解 2.解构详细解析 2.1对象属性赋值形式 2.2变量的声明 2.3怎么解构 3.实践 3.1数组的解构 3.2对象的解构 3.3解构参数 4.总结 ☀️作者简介&#xff1a;大家好我是言不及行yyds &#x1f40b;个人主页&#xff1a;言不及行yyds的CSDN博客 &#…

Element-UI--<el-switch>的@change回调函数的参数用法

原文网址&#xff1a;Element-UI--&#xff1c;el-switch&#xff1e;的change回调函数的参数用法_IT利刃出鞘的博客-CSDN博客 简介 说明 本文介绍Element-UI的<el-switch>的change回调函数的参数用法。 需求 2个switch组件&#xff0c;用同一个回调函数switch组件状…

Flask 与 Django 框架对比

详细分析了两种 Python Web框架&#xff1a; Flask 与 Django。从开发难易度、应用架构、性能、可扩展性以及适用范围等方面进行了详细说明。 Django 中级教程在 B 站上线&#xff0c;深入解析 Django 体系架构&#xff0c;实现从入门到精通的跨越。在线教程 前言 基于 Gith…

H5呼起微信支付(个人实践总结)

H5呼起微信支付存在两种场景 第一种&#xff1a;其他浏览器呼起微信支付。 第二种&#xff1a;微信内部呼起微信支付。 项目说明&#xff1a; 我这边的项目要求的两种方式均要适用。 产品要求是当支付失败时或者未支付情况是停留在支付订单页面&#xff0c;可再次发起订单请…

Vue3下使用Vuex(store)实现响应式全局变量

Vue3下使用Vuex store1 安装2 编写vuex配置文件2.1 目录及文件结构2.2 index.js文件2.3 编写vuex模块级参数文件2.4 index.js中引入模块级参数3 引入4 使用5 持久化5.1 vuex值存储在sessionStorge中5.1 vuex值存储在localStorge中注意本文记录了如何使用vuex建立响应式全局变量…

Java后端Date类型返回给前端变为时间戳解决方法

今天在制作个人博客的分页功能时候&#xff0c;发现了这个问题 后端查询数据正确&#xff0c;2022-11-12 数据库MySQL5.7 用的date类型 因为写文章一般yyyy-MM-dd 类型就够用了 如果你需要yyyy-MM-dd HH-mm-SS 这种带时分秒的用datetime类型 数据存的也是2022-11-12 格式正确…

【JSP入门】只知道HTML却不知道JSP?

前言 今天我们继续来总结学习JSP相关知识&#xff0c;上一篇我们学习了Servlet的基础入门&#xff0c;如果你还对Servlet那么建议你先去看一下上篇博客再回来。 传送门&#xff1a;【Servlet入门】一篇文章让你从没听过到了熟于心 在之前我们已经学习了HTML&#xff0c;CSS&…

html静态登录、注册页面

登录 代码如下 <!DOCTYPE html> <html> <head> <meta charset"utf-8"> <style> body { background: url(https://cdn.pixabay.com/photo/2018/08/14/13/23/ocean-3605547_1280.j…

windows7安装node14版本及以上

前言&#xff1a; gitee上拉了一个项目&#xff0c;npm install一直报错。一直没有解决&#xff0c;就去gitee上看前端启动教程。作者说要运行在node14或者16上。我就去官网下载node14的msi。这个是不支持windows7的。我就百度&#xff0c;他们说要下载压缩包。 我之前走了好…

sourcemap文件泄露漏洞

最近进行渗透测试时&#xff0c;时常遇到xray扫出sourcemap文件&#xff0c;每次扫到都要百度&#xff0c;因此做个笔记。 漏洞原理 在日常测试时&#xff0c;经常会遇到以js.map为后缀的文件 这是jQuery中的一个新功能&#xff0c;支持Source Map 非常多Webpack打包的站点都…

Vue3: vue3 props接多个不同类型的参数,默认false

哪天的问题来着...嘶...(挠头)... 之所以会卡在这里&#xff0c;是因为在我的经验及认知里&#xff0c;封装组件中props的使用&#xff0c;接参时从来都是一个参数对应一个值&#xff0c;尤其是在ts中&#xff0c;还更为严格地设定了参数类型&#xff0c;所以我的业务需求不知道…

保姆级教程!如何在安卓手机上安装使用油猴脚本

浏览器插件成千上万&#xff0c;但是大家都有一个共识&#xff0c;那就是油猴无插件能敌&#xff0c;原因就在于它一个插件就可以实现众多插件的功能。 首先需要明确一点的是&#xff0c;油猴插件本身是没有任何功能的&#xff0c;它需要依靠脚本来实现功能。至于脚本&#xf…

红队web打点信息收集

目录 红蓝对抗 ICP备案查询—查询主域 主站域名一键查询 敏感信息收集 googlehack语法 目标邮箱号收集 子域名收集 被动信息收集 证书透明 fofa_viewer 在线子域名查询 第三方DNS服务 google语法 主动信息收集 oneforall Sylas—从burp历史记录中提取子域 Lay…

【node.js从入门到精通】使用express创建web服务器,路由,进行中间件的创建链接路由及其他中间件

目录 前言 初识express 使用express创建基本的web服务器 初识express路由 路由匹配概念 路由模块化 中间件 中间件和路由的区别 定义中间件函数 中间件作用 局部生效中间价 中间件分类 1.应用级别中间件 2.路由级别的中间件 3.错误级别中间件 4.内置中间件 5.自定义…

带你深入理解js事件循环机制

同步任务和异步任务&#xff08;微任务和宏任务&#xff09; JavaScript是一门单线程语言 分为同步任务和异步任务 同步任务是指在主线程上排队执行的任务&#xff0c;只有前一个任务执行完毕&#xff0c;才能继续执行下一个任务。 异步任务指的是&#xff0c;不进入主线程…

Pro1:图片的隐藏和显示

什么是JavaScript&#xff1f;实现目标实现代码实现效果实现方法&#x1f49b;作者主页&#xff1a;静Yu &#x1f9e1;简介&#xff1a;CSDN全栈优质创作者、华为云享专家、阿里云社区博客专家&#xff0c;前端知识交流社区创建者 &#x1f49b;社区地址&#xff1a;前端知识交…

axios 中如何取消请求_从不会使用到精通原理_番茄出品

start 最近频繁遇到一个问题&#xff0c;axios 是如何取消请求的&#xff1f;这篇文章将从新手小白的视角出发&#xff0c;从 axios 取消逻辑的基础使用&#xff0c;到原理分析&#xff0c;带你彻底了解并掌握 axios 中取消请求的“秘密”。编写时间&#xff1a;2023/02/24-23…

520到了,教你做个JavaWeb表白墙小项目

目录 1.配置 Maven 项目 1.1 创建 Maven 项目 1.2 引入相关依赖 1.3 项目总结构 2. 约定前后端交互接口 3.服务端代码 3.1 创建Message类 3.2 创建工具类 3.3 添加信息类&#xff08;AddMessage&#xff09; 3.4 查询信息类&#xff08;MessageList&#xff09; 4. …

vue3中的配置代理

如图&#xff0c;配置代理就是在客户端与服务器中充当中介的角色 目录 关于配置代理&#xff0c;首先我们的要知道为什么要配置代理&#xff0c;配置代理做了什么事情 一、跨域是什么 二、如何解决 三、配置代理案例 1. 下面是我自己在后端尝试解决跨域的例子 2.然后在vue中…

【Vue项目实战】Vue3中动态修改样式和级联样式优先顺序详解

Vue实战笔记目录前言一、ref修改样式1、通过 Vue 的 ref 组件获取 DOM 元素节点注&#xff1a;这边比较一下&#xff0c;和 DOM操作 document.getElementById(id) 这个方法有什么区别2、通过 ref 修改 DOM 元素节点样式二、通过v-bind对Html元素的样式(style)进行动态绑定三、v…