【API】百度地图
一、在html中使用百度地图
参考官网：jspopularGL | 百度地图API SDK (baidu.com)
<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Hello, World</title> <style type="text/css"> html{height:100%} body{height:100%;margin:0px;padding:0px} #container{height:100%} </style>
<!-- 引入百度地图 -->
<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=AK7gPDOt9G8NFVrPsvci5PyA79CaIEfi"> </script> </head> <body> <div id="container"></div> <script type="text/javascript"> var map = new BMapGL.Map("container"); // 创建地图实例 var point = new BMapGL.Point(116.404, 39.915); // 创建点坐标 map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别 </script> </body> </html>
二、在vue-cli中使用百度地图
参考： vue中引入百度地图_~疆的博客-CSDN博客_vue引入百度地图
1.npm下载
npm i -S vue-baidu-map
2.在main.js中配置
import BaiduMap from 'vue-baidu-map' Vue.use(BaiduMap, { ak: "AK7gPDOt9G8NFVrPsvci5PyA79CaIEfi" })
3.在页面中使用
<baidu-map :center="{lng:104.116729,lat:30.629222} " zoom="17" style="height:300px"></baidu-map>
三、在react中使用百度地图
步骤类似上述二
总结：上述方法经过尝试后可实现，但是在vue-cli中，只有npm下载后实现了预期，另外一种则没有实现，具体问题还有待了解。
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通