【API】百度地图

一、在html中使用百度地图

<!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中使用百度地图

参考：React-BMapGL文档 (baidu.com)

步骤类似上述二

总结：上述方法经过尝试后可实现，但是在vue-cli中，只有npm下载后实现了预期，另外一种则没有实现，具体问题还有待了解。

posted @ 2022-06-24 12:00 头秃婷婷阅读(165) 评论(0) 收藏举报

刷新页面返回顶部

TitiAndCow

头秃婷婷的知识仓库

【API】百度地图

公告