百度地图API简单小例

最新推荐文章于 2021-12-10 15:53:58 发布

铃铛当当

最新推荐文章于 2021-12-10 15:53:58 发布

阅读量1k

点赞数 3

分类专栏：百度地图

本文链接：https://blog.csdn.net/liuyanlinglanq/article/details/48139673

版权

百度地图专栏收录该内容

1 篇文章 0 订阅

订阅专栏

使用百度地图很简单,百度已经提供了非常丰富的地图效果,并附上完整的代码.直接按照示例代码,短短几行就能做出地图效果.百度地图API的示例,但是在用这个API的时候,必须有一个密钥.

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>

而这个密钥则需要注册申请,在百度地图,点击右上角的"API控制台",查看应用

创建自己的应用,填一下应用名称,然后加上IP白名单,我加的就是"0.0.0.0/0",不对IP做任何限制.不加白名单的话,会出现这个问题.

然后你就可以写一段代码,就能使用百度地图了.建个.html文档,写上如下代码,密钥记得用你自己的.

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
		body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
	</style>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密钥"></script>
	<title>拖拽地图</title>
</head>
<body>
	<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
	// 百度地图API功能
	var map = new BMap.Map("allmap");            // 创建Map实例
	map.centerAndZoom(new BMap.Point(116.4035,39.915),8);  //初始化时，即可设置中心点和地图缩放级别。
	map.enableScrollWheelZoom(true);
	map.disableDragging();     //禁止拖拽
	setTimeout(function(){
	   map.enableDragging();   //两秒后开启拖拽
	   //map.enableInertialDragging();   //两秒后开启惯性拖拽
	}, 2000);
</script>

效果就是这样