分类:java2012-12-05
18:121654人阅读收藏举报
http://www.cnblogs.com/milkmap/archive/2011/02/22/1960004.html
<摘要>你将在第一章中学会以下知识:
- 如何创建一个网页文件
- 怎样利用百度地图API建立一张2D地图,以及3D地图
- 如何添加对地图进行鼠标和键盘操作的功能
-------------------------------------------------------------------------------------------------------------------
一、创建网页文件
粘贴以下代码至记事本中,保存文件为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对应起来。
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(); //开启键盘操作功能
下面我们来看一下完整的程序。点击这里运行程序。
<!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" style="float:left;"></div>
<div style="float:right;width:400px;">
<p>开启滚轮缩放</p>
<p>关闭双击放大</p>
<p>开启键盘操作</p>
<p>说明:键盘的上、下、左、右键可连续移动地图。同时按下其中两个键可使地图进行对角移动。PgUp、PgDn、Home和End键会使地图平移其1/2的大小。+、-键会使地图放大或缩小一级。</p>
</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("北京市"); //设置当前城市
map.enableScrollWheelZoom(); //开启滚轮缩放功能
map.disableDoubleClickZoom(); //关闭双击放大功能
map.enableKeyboard(); //开启键盘操作功能
</script>
</html>
http://www.cnblogs.com/milkmap/archive/2011/02/22/1960004.html
<摘要>你将在第一章中学会以下知识:
- 如何创建一个网页文件
- 怎样利用百度地图API建立一张2D地图,以及3D地图
- 如何添加对地图进行鼠标和键盘操作的功能
-------------------------------------------------------------------------------------------------------------------
一、创建网页文件
粘贴以下代码至记事本中,保存文件为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对应起来。
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(); //开启键盘操作功能
下面我们来看一下完整的程序。点击这里运行程序。
<!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" style="float:left;"></div>
<div style="float:right;width:400px;">
<p>开启滚轮缩放</p>
<p>关闭双击放大</p>
<p>开启键盘操作</p>
<p>说明:键盘的上、下、左、右键可连续移动地图。同时按下其中两个键可使地图进行对角移动。PgUp、PgDn、Home和End键会使地图平移其1/2的大小。+、-键会使地图放大或缩小一级。</p>
</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("北京市"); //设置当前城市
map.enableScrollWheelZoom(); //开启滚轮缩放功能
map.disableDoubleClickZoom(); //关闭双击放大功能
map.enableKeyboard(); //开启键盘操作功能
</script>
</html>
分享到:
相关推荐
将百度地图嵌入c# cs窗体中,cs...查了很多资料,参考网上众多朋友的代码及百度地图API demo,这个例子中的js代码不用key,方便很多,使用的是v1.4版,少了很多限制,使用.net4.5开发的,可以将c#代码转为低版本也行的。
使用javascript 调用百度地图api 调用百度地图api 非常简单
将百度地图嵌入c# cs窗体中,... 查了很多资料,参考网上众多朋友的代码及百度地图API demo,这个例子中的js代码不用key,方便很多,使用的是v1.4版,少了很多限制,使用.net4.5开发的,可以将c#代码转为低版本也行的。
通过C++代码调用百度地图API,一个简单实用的百度地图操作实例,希望能给大家带来帮助。
这是调用百度地图API实现定位、检索、导航的源码,因为百度地图API在不断的升级,前后有些出入,这是最新的百度SDK。希望对新手有帮助
Qt5实现百度地图API的调用——物体轨迹的设计、插入、删除、保存、读取。使用js文件实现Qt和API之间的沟通。https://mp.csdn.net/editor/html/114036591中有项目效果运行截图和简要的说明,欢迎交流。
Android调用百度地图api 自动定位,获取中心位置的坐标,根据坐标获取地理信息,标注地理信息
vue调用百度地图api
C# VS2010下前后台交互调用百度地图API, 实现标注、测距、画轨迹、画圆,等等
案例文档里面有使用教程——《基于MFC与第三方类CWebPage的百度地图API开发范例.pdf》,可依照教程步骤进行操作。源码在“GeoDemo”文件夹里面。
调用百度地图API显示虚线运动轨迹,自己写的一个例子,附带注释,适合初次接触百度地图API的
MFC调用百度地图API批量检索并返回和保存所有POI数据: 里面包含了VS2015建立的MFC文件,还有JS调用百度地图API的文件,具体怎么使用参考博客:https://blog.csdn.net/qq_17783559/article/details/87859862
调用百度地图api获得指定地点经纬度以及附近poi。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
在delphi 中 调用百度地图,功能比较全面
自测可以使用
c#窗体显示百度地图 实现测距 标记 框选 路线规划等功能
百度地图api javascript api 1.4
C# 2010调用百度地图API
教你如何在winphone中调用百度地图api,获取坐标以及地理位置。