如何在网页中调用百度地图api

 我来答
哈哈哈辣02K
2017-01-17 · 超过39用户采纳过TA的回答
知道答主
回答量:112
采纳率:0%
帮助的人:16万
展开全部
一、创建网页文件
粘贴以下代码至记事本中,保存文件为bank1-1.htm文件。
点击这里运行程序。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>酸奶小妹——百度地图API学习</title>
</head>
<body>
在这里填入你的地图程序
</body>
</html>

二、使用百度地图API建立一张简单的地图

1、引用API的js,放置bank1-1.htm的<head></head>中
说明:
v=1.1这是API的版本,表明是1.1版本的。
sercices=false是指,不开启地图服务,例如公交驾车查询等。

<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.1&services=false"></script>

2、设置地图容器的样式,放置<head></head>中
说明:
制定容器高度后,方能显示出地图。

<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#milkMap{height:100%}
</style>

你还可以自己规定容器的高度、宽度,边框颜色等。比如

<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#milkMap{height:400px;width:600px;border:1px solid blue;}
</style>

3、在<body></body>中放置地图容器
说明:id号是唯一的,在创建地图的js中,要与此id对应起来。

<div id="milkMap"></div>

4、在</body></html>中放置自己的js
说明:
创建地图使用new BMap.Map,创建点使用new BMap.Point。
创建地图需要设置地图中心点,与地图级别。1级最大,能看见全球;18级最小,最详细。
其中地图级别的对应关系为,4级-国; 8级-省, 12级-市, 18级-街道。

<script type="text/javascript">
var map = new BMap.Map("milkMap"); // 创建地图实例
var point = new BMap.Point(116.404, 39.915); // 创建点坐标
map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别
</script>

4、一张2D地图就创建完毕了。接下来,你可以运行你的地图程序。
点击这里运行程序。

三、制作3D地图
说明:

说明:
使用 BMAP_PERSPECTIVE_MAP 使地图变成3D类型。设置3D地图,需要首先setCurrentCity,设置当前城市。
目前,只支持北上广深四个城市的3D图。
点击这里运行程序。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>酸奶小妹——百度地图API学习</title>
<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#milkMap{height:400px;width:600px;border:1px solid blue;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.1&services=false"></script>
</head>
<body>
<div id="milkMap"></div>
</body>
<script type="text/javascript">
var map = new BMap.Map("milkMap"); // 创建地图实例
var point = new BMap.Point(116.404, 39.915); // 创建点坐标
map.centerAndZoom(point, 18); // 初始化地图,设置中心点坐标和地图级别

map.setMapType(BMAP_PERSPECTIVE_MAP); //修改地图类型为3D地图
map.setCurrentCity("北京市"); //设置当前城市

</script>
</html>

四、添加对地图进行鼠标和键盘操作的功能
开启滚轮缩放功能,该功能默认是禁用的。
关闭双击放大功能,该功能默认是开启的。

enableScrollWheelZoom(); //开启滚轮缩放功能
disableDoubleClickZoom(); //关闭双击放大功能

开启键盘操作功能,该功能默认禁用。
键盘的上、下、左、右键可连续移动地图。同时按下其中两个键可使地图进行对角移动。PgUp、PgDn、Home和End键会使地图平移其1/2的大小。+、-键会使地图放大或缩小一级。

enableKeyboard(); //开启键盘操作功能
广东轻亿云软件
2024-05-14 广告
广东轻亿云软件科技有限公司在软件开发领域深耕多年,积累了丰富的经验和技术实力。我们深知API接口在现代软件开发中的重要性,因此,我们与多家业界领先的API接口提供商保持着紧密的合作关系,确保我们的产品和服务能够充分利用这些接口,为用户提供更... 点击进入详情页
本回答由广东轻亿云软件提供
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式