问题:刚接触百度地图有很多基础问题不明白。
解决方案:http://www.cnblogs.com/milkmap/archive/2011/02/24/1962513.html
如何在地图上添加各种控件?
首先,我们来了解一下,百度API到底提供哪些控件呢?
查看API首页->类参考->控件类,我们会发现如下控件类:鱼骨、鹰眼、比例尺、2D3D转换控件、版权控件。
---------------------------------------------------------------------------------------------------------------------
1、鹰眼,又称缩略图控件——OverviewMapControl
如上图,左边为关闭(默认);右边为开启。
鹰眼默认为关闭状态,可以利用{isOpen:1}属性,使它开启。
同时,我们还可以利用anchor属性,改变控件的位置。一共有四个位置可以选择,分别是:
- BMAP_ANCHOR_TOP_LEFT 左上
- BMAP_ANCHOR_TOP_RIGHT 右上
- BMAP_ANCHOR_BOTTOM_LEFT 左下
- BMAP_ANCHOR_BOTTOM_RIGHT 右下
点击这里运行代码(鹰眼,开启状态,位置右上角)
---------------------------------------------------------------------------------------------------------------------
2、鱼骨,别名地图平移缩放控件——NavigationControl
鱼骨有4种模式:
-
BMAP_NAVIGATION_CONTROL_LARGE
表示显示完整的平移缩放控件。(默认) -
BMAP_NAVIGATION_CONTROL_SMALL
表示显示小型的平移缩放控件。 -
BMAP_NAVIGATION_CONTROL_PAN
表示只显示控件的平移部分功能。 -
BMAP_NAVIGATION_CONTROL_ZOOM
表示只显示控件的缩放部分功能。
现在,我们去掉刚才的默认鱼骨,换上一个迷你鱼骨。
你只需要在刚才的代码上,加上迷你鱼骨的类型即可。如下:
点击这里运行代码(迷你鱼骨)。
---------------------------------------------------------------------------------------------------------------------
3、比例尺控件——ScaleControl
由于百度API是免费的,百度要求使用百度API开发的地图,必须使用带上百度的logo。
但有时候这个logo挺“碍事儿”的,经常会挡住比例尺。怎么办呢?我们又不能去掉这个logo。
因此,我们需要利用offset来规定控件的偏移。
offset: new BMap.Size(5,40) 表示,距离左下角的原点,偏移X=5,Y=40像素的位置。
点击这里运行代码。(偏移后的比例尺)
---------------------------------------------------------------------------------------------------------------------
4、2D3D切换控件,又叫做地图类型控件——MapTypeControl
只要使用3D地图,都需要设置当前城市位置。
目前,只支持北上广深四个城市的3D地图显示。
map.setCurrentCity("北京"); // 仅当设置城市信息时,MapTypeControl的切换功能才能可用
点击这里运行代码。(3D图控件)
---------------------------------------------------------------------------------------------------------------------
5、版权控件——CopyrightControl
版权信息的属性中,id为数字,必须写一个。
content里面的格式可以是html的,这样就可以加图片,或者超链接了。
map.addControl(myCopyright); //为地图添加版权控件
myCopyright.addCopyright({id : 1, content : '<a href="htp://www.ui-love.com">我是版权信息哦</a>'});
---------------------------------------------------------------------------------------------------------------------
运行全部代码,请点击这里。(控件安装完毕,包括:鹰眼、鱼骨、比例尺、3D控件、版权信息)
<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, 16); // 初始化地图,设置中心点坐标和地图级别
map.addControl(new BMap.OverviewMapControl({isOpen:1})); //为地图添加鹰眼
//map.addControl(new BMap.NavigationControl()); //为地图添加鱼骨(默认)
map.addControl(new BMap.NavigationControl({type: BMAP_NAVIGATION_CONTROL_SMALL})); //为地图添加鱼骨(迷你型)
//map.addControl(new BMap.ScaleControl()); //添加一个带上偏移量的比例尺
map.addControl(new BMap.ScaleControl({offset: new BMap.Size(5, 40)})); //添加一个带上偏移量的比例尺
map.addControl(new BMap.MapTypeControl()); //为地图添加2D3D切换控件
map.setCurrentCity("北京"); // 仅当设置城市信息时,MapTypeControl的切换功能才能可用
var myCopyright =new BMap.CopyrightControl({offset: new BMap.Size(82, 0)}) //设置版权信息偏移量
map.addControl(myCopyright); //为地图添加版权控件
myCopyright.addCopyright({id : 1, content : '<a style="line-height:30px;height:30px;display:block;color:red;background:yellow" href="http://www.cnblogs.com/milkmap/"><img src="http://www.ui-love.com/static/img/uiico.ico" />酸奶小妹的博客园</a>'});
</script>
</html>
---------------------------------------------------------------------------------------------------------------------
复习要点:
- 控件有4个位置可以摆放,利用anchor属性;
- 控件还可以设置偏移量,做位置的调整,需要用到offset属性;
- 鹰眼可以设定开启,和关闭的状态,用到isOpen属性;
- 鱼骨有四种模式可以选择,使用type属性;
- 版权信息是可以写入html的,使用版权必须写入id属性。
---------------------------------------------------------------------------------------------------------------------
小知识:
你知道比例尺的一像素对应的是几米麼?
答案:
相关推荐
百度地图API是一套功能强大的工具包,基于JavaScript开发,旨在为开发者提供一个简单、高效的方法来集成地图功能到其网页应用中。该API不仅支持基本的地图显示,还包含了丰富的附加功能,如本地搜索、路线规划等。 ...
从百度API页面down下来做成chm格式的,比较详细的百度地图API参考
### 百度地图API类参考详解 #### 一、核心类——`Map` **构造函数:** - **Map(container:String|HTMLElement[,opts:MapOptions])**:此构造函数用于在指定的HTML容器中创建一个新的地图实例。参数`container`...
百度地图最新api,为了方便我把做成chm格式,供大家查看. (版权归百度所有,现只为开发者提供方便制作) (源文件来自百度地图官方api)
百度地图API中所有的参考类,对每个函数,每个事件都有详细的说明.是个工具类的教程说明.pdf
百度地图API是开发人员构建地图相关应用的强大工具,它允许开发者通过集成不同的版本接口,实现丰富的功能,如基本地图展示、定位、搜索、导航等。在本压缩包中,包含的“BaiduMapsApiDemo”可能是一个示例项目,...
本压缩包"**C#百度地图API.rar**"提供了一套关于C#与百度地图API结合使用的参考资料,对于那些需要在自己的应用中集成地图功能的开发者来说非常有价值。下面将详细解释其中涉及的关键知识点: 1. **C#编程语言**: ...
将百度地图嵌入c# cs窗体中,cs...查了很多资料,参考网上众多朋友的代码及百度地图API demo,这个例子中的js代码不用key,方便很多,使用的是v1.4版,少了很多限制,使用.net4.5开发的,可以将c#代码转为低版本也行的。
百度地图API类参考 百度地图API是由百度公司提供的一款功能强大且易于使用的地图开发工具,旨在帮助开发者快速构建基于地图的应用程序。通过本API,开发者可以轻松地将地图功能集成到自己的应用程序中,实现各种...
1. **kaiduhe.html** 和 **sample.html**:这两个文件是示例网页,展示了如何使用百度地图API 2.0进行地图展示、标注、事件监听等基本操作,可作为开发参考。 2. **GoogleToBaidu.jar**:这是一个用于将Google地图...
将百度地图嵌入c# cs窗体中,... 查了很多资料,参考网上众多朋友的代码及百度地图API demo,这个例子中的js代码不用key,方便很多,使用的是v1.4版,少了很多限制,使用.net4.5开发的,可以将c#代码转为低版本也行的。
1. **百度地图API**:百度地图API是百度公司提供的一套Web服务接口,允许开发者在其网站或应用中嵌入地图功能,包括地图显示、定位、路径规划等。通过JavaScript API,开发者可以轻松地与百度地图进行交互,创建丰富...
1,基础API:apiv1.3.min.js ,有注释可参考; 2,基础CSS: bmap.css ; 3,依赖文件:map,oppc,tile,control,marker; 4,瓦片图:maptile; 5,例子:demo.html;用火狐和chrome可直接打开,在IE下还有些问题。 多多...
本文将详细探讨“百度地图API地址批量转换坐标”的概念、功能以及如何利用它进行坐标转换,同时也涉及到与之相关的Excel上传和地图撒点功能。 首先,让我们了解什么是百度地图API。百度地图API是百度提供的一套接口...
在JavaScript开发环境中,百度地图API提供了丰富的接口,使得开发者可以轻松地实现地图功能。此资源的描述提到了几个关键的API用法: 1. **加载地图类型**:百度地图API支持多种地图样式,如普通地图、卫星地图、...
综上所述,这个实例教程展示了如何结合ASP.NET和百度地图API开发Web应用,涵盖了从页面布局、服务器端逻辑到客户端交互的完整流程,对于学习这两项技术的开发者来说极具参考价值。通过这个实例,你可以学习到如何在...
【标题】"bMap百度地图API地址输入插件"是一个基于百度地图API开发的插件,主要用于提升用户在网页中输入地址的体验。这个插件实现了地址关键词智能搜索功能,用户可以通过输入地址的一部分来快速找到完整的地理位置...
完善的开发工具和文档是百度地图API的一大优势,提供了示例代码、调试工具以及详细的API参考文档,方便开发者快速上手和解决问题。 通过以上这些功能,开发者可以利用百度地图API构建各种创新的应用,如出行助手、...
"百度地图 API 类参考,2018整理,很全" 从给定的文件信息中,我们可以生成以下知识点: 1. 百度地图 API 类参考的结构:百度地图 API 类参考是一个核心类,用于实例化一个地图。它有多个方法和属性,可以对地图...