过几天公司要做一个项目,里面有要显示地图的需求,对于我这个前端小白来说,没有经历过,当然不会做了,不过还好有百度的这个"老师"在,无关乎其他的需求,先把百度地图展示到页面上来说再去管其他的。通过不懈的小努力吧,还算可以能展示到h5页面上了。
下面的是demo的代码 也是官方的demo代码
<!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>Baidu Map </title>
<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#container{height:40vh;width: 40vw;margin: 50px auto;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的ak秘钥"></script>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
var map = new BMap.Map("container"); // 创建地图实例
var point = new BMap.Point(116.404, 39.915); // 创建点坐标
map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
</script>
</body>
</html>
总体来说还是很简单,主要是要去引入哎百度的 api的 js文件,然后初始化
还有一个关键的一点 就是你要去百度地图官方注册一个你的 ak秘钥 才行
https://lbsyun.baidu.com/index.php?title=jspopular/guide/service // 百度地图api
去控制台 申请 一个 ak 秘钥 获取之前 必须先注册一个 开发者的身份权限 按照他的指示走就可以
起一个 应用名字 这个自定义
应用名字 就是 浏览器端
白名单 你开发着 玩玩 可以填一个 * 所有都可以访问
获取一个开发者权限 这个时候 他往你的邮箱里面发送一个激活的链接
激活之后 就会获取到一个你自己的ak 秘钥 然后 粘贴到上面的那个 链接 ak= 后面
这样百度地图就显示在你的页面上了