前端页面嵌入百度地图的小demo

过几天公司要做一个项目,里面有要显示地图的需求,对于我这个前端小白来说,没有经历过，当然不会做了,不过还好有百度的这个"老师"在,无关乎其他的需求,先把百度地图展示到页面上来说再去管其他的。通过不懈的小努力吧,还算可以能展示到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= 后面
这样百度地图就显示在你的页面上了
在这里插入图片描述

yunchong_zhao

原创文章 288 获赞 101 访问量 4万+

关注私信

前端页面嵌入百度地图的小demo

猜你喜欢