百度地图API的使用(JavaScript版)
2021/5/2 12:27:04
本文主要是介绍百度地图API的使用(JavaScript版),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
文章目录
- 前言
- 一、入门准备
- 1.申请秘钥(ak)
- 2.入门程序
前言
为什么写这篇文章:我的一篇学习笔记,同时分享给大家,互帮互助共同进步。
适宜人群:想学习使用百度地图API的同学
你将学习到:如何申请秘钥、如何使用百度地图API
条件:一台联网的电脑
资料参考:百度地图API官方文档
注意:本文仅供学习使用,如有侵权,请联系作者删除。
一、入门准备
1.申请秘钥(ak)
进入百度地图api官网,登录百度账号,点击申请秘钥(ak)
点击创建应用
输入下面标出的三个地方后点击提交
注意:白名单的地方填*表示所有网站都能访问
记住这里的AK秘钥,待会要用,回到此页面复制即可
2.入门程序
随便哪个地方,新建一个HTML文件,引入百度地图脚本文件,并把刚才的秘钥copy过来
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>自定义Marker图标</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <style> body, html, #container { overflow: hidden; width: 100%; height: 100%; margin: 0; font-family: "微软雅黑"; } </style> <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=你的秘钥"></script> </head> <body> <div id="container"></div> </body> </html> <script type="text/javascript"> var map = new BMapGL.Map('container'); var point = new BMapGL.Point(116.404, 39.915); map.centerAndZoom(point, 15); // 创建小车图标 var myIcon = new BMapGL.Icon("img/car.png", new BMapGL.Size(100, 90)); // 创建Marker标注,使用小车图标 var pt = new BMapGL.Point(116.417, 39.909); var marker = new BMapGL.Marker(pt, { icon: myIcon }); // 将标注添加到地图 map.addOverlay(marker); </script>
访问效果:
注意:图片需自己准备
更多功能请参考百度地图API
这篇关于百度地图API的使用(JavaScript版)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-05小米13T Pro系统合集:性能与摄影的极致融合,值得你升级的系统ROM
- 2024-10-01基于Python+Vue开发的医院门诊预约挂号系统
- 2024-10-01基于Python+Vue开发的旅游景区管理系统
- 2024-10-01RestfulAPI入门指南:打造简单易懂的API接口
- 2024-10-01初学者指南:了解和使用Server Action
- 2024-10-01Server Component入门指南:搭建与配置详解
- 2024-10-01React 中使用 useRequest 实现数据请求
- 2024-10-01使用 golang 将ETH账户的资产平均分散到其他账户
- 2024-10-01JWT用户校验课程:从入门到实践
- 2024-10-01Server Component课程入门指南