项目中引入百度地图API
前言
百度地图
JavaScript API
是一套由JavaScript
语言编写的应用程序接口,可帮助您在网站中构建功能丰富、交互性强的地图应用,支持PC
端和移动端基于浏览器的地图应用开发,且支持HTML5
特性的地图开发。
文档地址
百度地图JavaScript SDK
:lbsyun.baidu.com/index.php?t…
使用方法
申请密钥
百度地图应用管理平台:lbsyun.baidu.com/apiconsole/…
创建应用
如下图,点击创建应用,为你的项目创建一个应用。用于使用百度地图API
。
应用信息
设置你的应用名称,以及应用的类型(浏览端)。
创建之后,我们就可以拿到AK了,后面我们引入需要使用到它。
引入API
方法一:
在项目的index.html
中,添加以下代码引入百度地图API
。
<!--引入百度地图api
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=你的密钥"></script>
<script>
window.BMap = BMap
</script>
方法二:( 如果你是使用vite
构建的react
项目,推荐使用以下方式进行引入BMap
)
在项目的index.html
中,添加以下代码引入百度地图API
。
<!--引入百度地图api
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=XIYLPKQE2G1jXeKXlplm0kH0x3hqPYpO"></script>
安装yarn add rollup-plugin-external-globals -D
,并在vite.config.js
配置文件加入以下代码,将BMap
全局暴露出来。
build:{
rollupOptions:{
external: ['BMap'],
plugins: [
externalGlobals({
BMap: 'BMap',
}),
],
}
},
方法三:( 如果你是使用webpack
构建的react
项目,推荐使用以下方式进行引入BMap
)
<!--引入百度地图api
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=XIYLPKQE2G1jXeKXlplm0kH0x3hqPYpO"></script>
在webpack
配置文件中加入以下代码,将BMap
全局暴露出来。
externals: {
"BMap": "BMap"
},
接下面在项目中就可以直接使用啦!
渲染地图
创建一个container容器,用于渲染地图。
<div className="Map">
<div id="container">
</div>
</div>
给容器设置样式,让地图容器占满整个页面。
.Map{
height: 100%;
width: 100%;
#container{
height: 100%;
}
}
通过BMap.Map
传入要渲染的容器,通过navigator.geolocation.getCurrentPosition
中的回调函数获取当前位置,通过BMap.Point
设定中心点坐标即可。
// 获取地理位置信息
navigator.geolocation.getCurrentPosition((position => {
const map = new BMap.Map("container");
const latitude=position.coords.latitude
const longitude=position.coords.longitude
map.centerAndZoom((new BMap.Point(longitude,latitude)), 15);
}))
关于百度地图API更多使用方法请查阅:lbsyun.baidu.com/index.php?t…
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanekie
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01