前端开发——百度地图开放平台的使用

已于 2023-08-31 10:14:10 修改
阅读量794 收藏 5
点赞数 1
分类专栏： 好用工具个人笔记 文章标签： web
于 2023-03-26 23:18:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_56004744/article/details/129786160
版权
  1. 进入百度地图开发平台，注册/登录账号（进入后需填写一些必要信息，个人根据使用情况填写）
  2. 找到API进入，可查看很多API的使用和使用案例，根据需求找到自己想要的

进入后浏览你想要的样式，在demo中可以看到需要我们在文件中引入一个script文件，文件中需要一个密匙，此时我们需要获取一个密匙

获取密匙：1、打开控制台；2、创建应用（输入必填的一些信息）；

此时我们就可以看见创建的应用会生成一个AK，这个就是您的密匙，复制到上面你引入的script文件密匙的位置

在页面中插入放地图的盒子

样式可以自己调整

 

 需要其他的控件可以自己去添加

一些使用中会遇到的小问题，更新中

°152
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
百度地图API的使用教程以及案例
kaixinde_9的博客
10-31 384
!v=1.0&&type=webgl&ak=TjlHRrUdfQMRNtRpXFzrGvfvedU3vmSK " > //引入百度地图js < script > var map = new BMapGL . Map("container");//初始化地图 var point = new BMapGL . Point(113.665 , 34.784);
百度地图API的使用
热门推荐
stc_ljc的博客
02-16 14万+
带你做出百度地图/教你如何调用API了解地图的使用场景，百度地图API介绍
百度地图api前端开发总结
dddgddd的博客
06-27 1647
1.this.map = new BMapGL.Map(“mymap”); // 创建Map实例 2.this.map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 5); // 初始化地图,设置中心点坐标和地图级别 3.this.map.enableScrollWheelZoom(true);//允许滚轮控制视口 4.var point = new BMapGL.Point(116.404, 39.925);//创建坐标点对象 5.this.ma
Web前端最全vue项目中使用百度地图教程（完整流程），搜狐新媒体运营面试
最新发布
2401_84411767的博客
05-16 263
小编综合了阿里的面试题做了一份前端面试题PDF文档，里面有面试题的详细解析开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】二、项目使用1、在index.html中引入2、代码演示。
如何调用百度地图API
.
06-15 1万+
百度地图API提供了多种服务，包括地图展示、路线规划、地点搜索、实时交通等。
前端项目中使用百度地图api，含实例
TeAmo__的博客
04-01 1万+
前言 一、使用百度地图接口的步骤 二、简单例子 1.第一个地图 2.控件 3.静态/动态添加点圈线面 4.文字标注、信息窗口 5. Web服务API-IP定位服务 6.Web服务API-地点检索服务 三、vue项目中使用百度地图接口的简单方式 1.public下方的index.html中导入 2. .vue文件中 前言 项目中加入地图是很常见的需求，今天以百度地图为例，总结一下引入地图的方法与实例 一、使用百度地图接口的步骤 1.注册百度地图的开发者帐号👇 百度地图http.
百度地图api根据后台数据添加多个坐标点
疯人院里的疯子傻子的博客
04-17 5729
百度地图添加多个坐标点 百度地图api添加坐标点，项目中遇到，坐标点根据后台去获取数据，效果如下： 点击坐标点弹框，效果如下： 首先要引用百度地图api的链接还有密码，下面代码，都能实现上述图标的效果，就是把后台获取的数据，字段名字改一下，就可以了 <head> <meta name="viewport" content="initial-scale=1.0,...
前端项目游戏网站开发——剑网3
12-01
前端项目游戏网站开发——剑网3，前端项目游戏网站开发——剑网3前端项目游戏网站开发——剑网3前端项目游戏网站开发——剑网3前端项目游戏网站开发——剑网3前端项目游戏网站开发——剑网3
基于百度地图的路灯管理_智慧_百度地图二次开发前端开发框架路灯_
10-02
一个基于百度地图在线管理路灯的程序，是学习MAPXX或GIS智慧管理平台的好案例
前端网络——Ajax使用
01-08
这是开发者已经订好的规则，我们只要记住固定的代码，就可以使用，只是这个固定的代码片段有点长而已 开始了,下面这一堆就是规定的代码： function loadXMLDoc() { var xmlhttp; if (window.XMLHttpRequest) {//...
前端基于百度地图插件
04-17
地图插件，坐标附近环境配置
百度地图开放平台接口
12-20
所以的百度地图js(包含所有的)调用，还有开发文档（百度地图JavaScript API v1.3开发指南，百度地图JavaScript API v1.3类参考）
用于前端百度离线地图开发的bmap.css代码
02-18
用于前端开发的bmap格式文件，主要针对百度离线地图的开发
前端开发——递归函数.docx
11-23
前端开发——递归函数.docx
HTML百度地图开发者平台的使用，实现简单位置定位
LiHang1234567777的博客
07-18 2638
用来显示定位信息的
百度地图开发入门（1）：案例
--Joern的物联领域--
06-08 2764
将我之前的百度地图入门的一些博文分享一下，这里主要系统讲解地图可视化的开发方式具体可以参考这里：https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/getkey最后当你的应用创建好了，就会得到一个服务密钥然后这里是百度地图的API：https://mapopen-pub-jsapi.bj.bcebos.com/jsapi/reference/jsapi_webgl_1_0.html第一步是需要显示出地图，这里我们使用html原生方式来讲解 以
百度地图API开发平台使用
无聊猿的每一日
11-20 777
废话不多说！！！！！！！！看下面： 登录网址：http://lbsyun.baidu.com/ 1.选择【控制台】 2.选择【创建应用】 3.【应用类型】WEB/javascript 使用选择浏览器端 4.【Referer白名单】填好网站域名 5.【提交】按钮 【查看应用】会有相应的【访问应用（AK）】 调用时：http://api.map.baidu.com/api?v=2.0&a...
vue 项目中百度地图 API 使用流程
weixin_43299180的博客
03-03 4052
文章目录一、在百度地图开放平台注册账号并登录二、认证 一、在百度地图开放平台注册账号并登录 网址：http://lbsyun.baidu.com/index.php?title=jspopularGL 二、认证 认证方式分为：个人认证、企业认证；这个需要根据自己的需要按照 ......
【百度地图api·javascript】入门，在web中创建和使用百度地图api
coder
11-26 2万+
简介 在web中内嵌地图是经常被提到的需求，可能是要求在web中加入地图展示公司的地址，可能是要求用户购买商品的时候能选择提货地址，或者需要在地图上标示出用户到达某个地点的路线。这里就开始介绍下百度地图在web中的应用方法。 创建一个可以访问的地图 首先去百度地图开发平台 ，注册成为开发者，然后 申请秘钥 秘钥会在程序里用到。 下面是一个创建的实例，可以作为参考。
前端对接开放百度api地图
06-01
好的，前端对接开放百度API地图的步骤如下： 1.首先，你需要在百度开放平台上注册账号，并创建一个应用，申请地图API的授权。 2.在你的网页中引入百度地图API的JavaScript库文件，例如： ``` <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的API key"></script> ``` 其中，API key 是你在百度开放平台上创建应用时生成的。 3.在HTML页面中添加一个地图容器，例如： ``` <div id="map"></div> ``` 4.在JavaScript代码中，使用百度地图API的相关接口来初始化地图、设置中心点、添加标记等操作，例如： ``` // 初始化地图 var map = new BMap.Map("map"); // 设置中心点 var point = new BMap.Point(116.404, 39.915); map.centerAndZoom(point, 15); // 添加标记 var marker = new BMap.Marker(point); map.addOverlay(marker); ``` 以上是基本的前端对接开放百度API地图的步骤，你可以根据自己的需求，使用百度地图API的其他接口来实现更多功能。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值