如何申请百度地图开发者AK和基本使用,并解决Uncaught ReferenceError: BMapGL is not defined的错误

这篇具有很好参考价值的文章主要介绍了如何申请百度地图开发者AK和基本使用,并解决Uncaught ReferenceError: BMapGL is not defined的错误。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1. 文章引言


今天在学习amis框架中的地理位置(LocationPicker)的组件,如下图所示:

bmapgl is not defined,免费专栏,百度,后端,前端,运维,架构

关于amis的更多了解,可以参考博文:百度低代码amis框架的讲解

截图中注意的是,ak参数只能在amis官网示例中使用,让我们前往百度地图开放平台申请自己的 ak

百度地图开放平台官网地址:https://lbsyun.baidu.com

百度地图也会开放一些免费的Api,来提供一些基本的地图服务。

于是点击链接,前往百度地图开放平台,申请自己的ak

说到现在,AK有什么用?AK即access key,就相当于我们百度地图的身份标识,也会跟实名信息绑在一起,只能用于正常开发(不能非法使用)。

我们有了AK后就可以参考开发文档中来调用百度地图了,也可以用于Vue-baidu-map后面文章会讲。

2. 申请AK

  1. 访问百度地图开放平台,如果你还未登录,则映入眼帘的就是登录,如下图所示:

bmapgl is not defined,免费专栏,百度,后端,前端,运维,架构

  1. 登录成功后,点击首页中的控制台,如下图所示:

bmapgl is not defined,免费专栏,百度,后端,前端,运维,架构

  1. 点击控制台中的应用管理,找到我的应用,点击创建应用。

如果你还没有实名认证,需要完成实名认证后,方可创建应用,如下图所示:

bmapgl is not defined,免费专栏,百度,后端,前端,运维,架构

因为只有创建应用,才能获取到ak

  1. 选择实名认证的类型,因为我是个人,故选择我是个人爱好者/学生,如下图所示:

bmapgl is not defined,免费专栏,百度,后端,前端,运维,架构

  1. 按照步骤填写完个人信息后,即可完成实名认证,我们便可以创建应用,如下图所示:

如实填写相关信息后,一般都会通过审核。

  • 应用名称:取个相关的项目名

  • 应用类型:选择浏览器端

  • 白名单:填个*就可以

bmapgl is not defined,免费专栏,百度,后端,前端,运维,架构
bmapgl is not defined,免费专栏,百度,后端,前端,运维,架构

  1. 创建成功后,在我的应用中,就可以看到ak了,如下图所示:

bmapgl is not defined,免费专栏,百度,后端,前端,运维,架构

3. 使用AK


我们再次打开百度地图开放平台,点击开发文档,你会看到如下开发文档:

  1. Web开发

  2. Android开发

  3. iOS开发

  4. HarmonyOS开发

因为我是web开发,选择JavaScript API,如下图所示:

bmapgl is not defined,免费专栏,百度,后端,前端,运维,架构

点击开发指南,找到入门指南,点击Hello World,即可看到示例,如下图所示:

bmapgl is not defined,免费专栏,百度,后端,前端,运维,架构

当然,你可以点击DEMO详情,查看完整的DEMO信息,如下图所示:

bmapgl is not defined,免费专栏,百度,后端,前端,运维,架构

复制DEMO详情中的源码,到我们的html页面中,注意源码中的这条语句:

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

将这条语句修改如下代码:

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

完整的示例代码如下所示:

<!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=您的密钥"></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>

4. 解决BMapGL is not defined的错误

如果你直接复制DEMO源码,而不修改上述这条语句:

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

能回报出如下错误,我们只要在//api前,加上https,即https://api.map.baidu.com/api?type=webgl&v=1.0&ak=您的密钥即可。

bmapgl is not defined,免费专栏,百度,后端,前端,运维,架构

5. 文末总结


经过我的分析,相信你对申请百度地图开发者AK和基本使用,有了初步的了解。

但在实际开发中,遇到的情况可能不一样。

比如,你可能是将百度地图嵌入到AndroidiOSApp中,那么,你就要看开发文档中的Android开发或者iOS开发的相关文档了。文章来源地址https://www.toymoban.com/news/detail-789796.html

到了这里,关于如何申请百度地图开发者AK和基本使用,并解决Uncaught ReferenceError: BMapGL is not defined的错误的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 2023年苹果IOS开发者证书申请(已实测准确)

    苹果开发者官网:https://developer.apple.com/ 注册苹果账号apple id 开启双重认证,需在一台IOS手机/iPad操作 在App Store下载Apple Developer APP ,进行注册开发者账号 去Apple Developer应用填写申请资料 绑定支付宝或者微信支付苹果年费(¥688元/年) 请等待苹果审核后,根据邮件提示,点击

    2024年02月07日
    浏览(67)
  • 百度Create AI开发者大会剧透丨用好三大AI神器 ,人人都是开发者

    程序员会消失,真的吗?大模型的下一站是什么?开发者的机会在哪里?什么才是最好用的AI应用开发工具?在4月16日举办的2024百度Create AI开发者大会上,百度创始人、董事长兼首席执行官李彦宏将就这些备受瞩目的问题一一进行解答。 4月11日,百度举办了“2024百度Create

    2024年04月13日
    浏览(53)
  • 百度Comate SaaS版本正式发布,助力开发者加速研发过程

    百度Comate是基于文心大模型的智能代码助手,让开发者的编码更快、更好、更简单,为开发者自动生成完整的、且更符合实际研发场景的代码行或整个代码块,帮助每一位开发者轻松完成研发任务。10月17日召开的百度世界大会上,百度CTO王海峰博士介绍了百度Comate在百度内部

    2024年02月08日
    浏览(46)
  • 百度开发者平台API地理编码,根据地址获取经纬度

    地理编码 | 百度地图API SDK (baidu.com) 原始csv 结果: 字段名称: 社区名称、经度、纬度、看下表吧。 地理编码 | 百度地图API SDK (baidu.com) 或者参考这篇博文: http://t.csdn.cn/AghZk

    2024年02月15日
    浏览(40)
  • 微信公众平台测试号申请、使用HBuilder X与微信开发者工具实现授权登陆功能以及单点登录

    测试账号申请 测号响应流程:客户端发送请求,微信服务器收到请求后,转发到开发者服务器上,处理完后在发送给微信服务器,在返回给客户端 1、打开微信公众平台,点击测试帐号申请。地址:https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login, 通过微信扫一扫授权就能进

    2024年02月02日
    浏览(61)
  • 百度王海峰披露飞桨生态最新成果 开发者数量已达800万

    8月16日,由深度学习技术及应用国家工程研究中心举办的WAVE SUMMIT深度学习开发者大会上,位于北京举行。百度的首席技术官兼深度学习技术及应用国家工程研究中心主任王海峰发表了主题演讲。王海峰首次向外界表示,大型语言模型已经具备理解、生成、逻辑推理、记忆等

    2024年02月09日
    浏览(59)
  • 微信小程序的订阅消息是一个允许开发者向用户发送重要通知的功能。这里为您展示如何实现小程序订阅消息的基本步骤和代码示例

    步骤 1: 获取模板 ID 首先,您需要登录微信公众平台,进入「小程序管理」后台,找到“设置” “开发设置” “订阅消息”,然后选择并配置所需的模板,记录模板 ID。 步骤 2: 小程序前端请求订阅 在小程序的某个页面或组件中,当用户执行某个操作(例如点击按钮)时,可

    2024年02月04日
    浏览(94)
  • 如何成为一名高效的前端开发者(10X开发者)

    如今,每个人都想成为我们所说的“10倍开发者”。然而,这个术语经常被误解和高估。 本质上,一个高效或者10倍开发者,在我看来,是指那些能够充分利用所有可用工具的人,通过让这些工具处理冗余和重复的任务,使他们能够专注于复杂和创造性的工作。以下是一些成

    2024年02月05日
    浏览(71)
  • ChatGPT如何进入开发者模式

            ~~~~~~~               ChatGPT 的回复质量取决于提示词(即 Prompt)。这通常是用户提供的问题或文本,以激活模型生成回复。简单来说,prompt 就是用户想要询问的内容,作为输入送到 ChatGPT 中,ChatGPT 会尝试理解这个输入,然后输出合适的回答或响应。通过优化提

    2024年02月05日
    浏览(51)
  • 苹果手机如何打开开发者模式

    下载爱思助手 数据线连接苹果手机 点击虚拟定位 修改虚拟定位 打开开发者模式 6.根据提示前往 iPhone “设置”-“隐私与安全性”,可发现“开发者模式”现在已经显示出来,请打开开关并重启设备。 7.设备完成重启后,屏幕上会出现询问是否打开“开发者模式”的提示框点

    2024年02月11日
    浏览(50)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包