百度MapAPI添加海量点对个数有要求吗
1个回答
展开全部
百度地图api参考
问题：刚接触百度地图有很多基础问题不明白。
解决方案：
如何在地图上添加各种控件？
首先，我们来了解一下，百度API到底提供哪些控件呢？
查看API首页->类参考->控件类，我们会发现如下控件类：鱼骨、鹰眼、比例尺、2D3D转换控件、版权控件。
---------------------------------------------------------------------------------------------------------------------
1、鹰眼，又称缩略图控件——OverviewMapControl
map.addControl(new BMap.OverviewMapControl()); //为地图添加鹰眼控件
如上图，左边为关闭（默认）；右边为开启。
鹰眼默认为关闭状态，可以利用{isOpen:1}属性，使它开启。
map.addControl(new BMap.OverviewMapControl({isOpen:1})); //开启鹰眼
同时，我们还可以利用anchor属性，改变控件的位置。一共有四个位置可以选择，分别是：
BMAP_ANCHOR_TOP_LEFT 左上
BMAP_ANCHOR_TOP_RIGHT 右上
BMAP_ANCHOR_BOTTOM_LEFT 左下
BMAP_ANCHOR_BOTTOM_RIGHT 右下
map.addControl(new BMap.OverviewMapControl({isOpen: 1, anchor: BMAP_ANCHOR_TOP_RIGHT})); //开启鹰眼，位置在右上方
点击这里运行代码（鹰眼，开启状态，位置右上角）
---------------------------------------------------------------------------------------------------------------------
2、鱼骨，别名地图平移缩放控件——NavigationControl
map.addControl(new BMap.NavigationControl()); //为地图添加鱼骨（默认）
鱼骨有4种模式：
BMAP_NAVIGATION_CONTROL_LARGE 表示显示完整的平移缩放控件。（默认）
BMAP_NAVIGATION_CONTROL_SMALL 表示显示小型的平移缩放控件。
BMAP_NAVIGATION_CONTROL_PAN 表示只显示控件的平移部分功能。
BMAP_NAVIGATION_CONTROL_ZOOM 表示只显示控件的缩放部分功能。
现在，我们去掉刚才的默认鱼骨，换上一个迷你鱼骨。
你只需要在刚才的代码上，加上迷你鱼骨的类型即可。如下：
map.addControl(new BMap.NavigationControl({type: BMAP_NAVIGATION_CONTROL_SMALL})); //为地图添加鱼骨（迷你型）
点击这里运行代码（迷你鱼骨）。
---------------------------------------------------------------------------------------------------------------------
3、比例尺控件——ScaleControl
map.addControl(new BMap.ScaleControl()); //为地图添加比例尺
由于百度API是免费的，百度要求使用百度API开发的地图，必须使用带上百度的logo。
但有时候这个logo挺“碍事儿”的，经常会挡住比例尺。怎么办呢？我们又不能去掉这个logo。
因此，我们需要利用offset来规定控件的偏移。
offset: new BMap.Size(5,40) 表示，距离左下角的原点，偏移X=5，Y=40像素的位置。
map.addControl(new BMap.ScaleControl({offset: new BMap.Size(5, 40)})); //添加一个带上偏移量的比例尺
点击这里运行代码。（偏移后的比例尺）
---------------------------------------------------------------------------------------------------------------------
4、2D3D切换控件，又叫做地图类型控件——MapTypeControl
只要使用3D地图，都需要设置当前城市位置。
目前，只支持北上广深四个城市的3D地图显示。
map.addControl(new BMap.MapTypeControl()); //为地图添加2D3D切换控件
map.setCurrentCity("北京"); // 仅当设置城市信息时，MapTypeControl的切换功能才能可用
点击这里运行代码。（3D图控件）
---------------------------------------------------------------------------------------------------------------------
5、版权控件——CopyrightControl
版权信息的属性中，id为数字，必须写一个。
content里面的格式可以是html的，这样就可以加图片，或者超链接了。
var myCopyright =new BMap.CopyrightControl({offset: new BMap.Size(82, 0)}); //设置版权信息偏移量
map.addControl(myCopyright); //为地图添加版权控件
myCopyright.addCopyright({id : 1, content : '<a >我是版权信息哦</a$amp;>apos;$});
---------------------------------------------------------------------------------------------------------------------
运行全部代码，请点击这里。（控件安装完毕，包括：鹰眼、鱼骨、比例尺、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=";services=false"$amp;>amp;$lt;/script>
</head>
<body>
<div id="milkMap"$amp;>amp;$lt;/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 $amp;>amp;$lt;img src="" />酸奶小妹的博客园</a$amp;>apos;$});
</script>
</html>
---------------------------------------------------------------------------------------------------------------------
复习要点：
控件有4个位置可以摆放，利用anchor属性；
控件还可以设置偏移量，做位置的调整，需要用到offset属性；
鹰眼可以设定开启，和关闭的状态，用到isOpen属性；
鱼骨有四种模式可以选择，使用type属性；
版权信息是可以写入html的，使用版权必须写入id属性。
---------------------------------------------------------------------------------------------------------------------
小知识：
你知道比例尺的一像素对应的是几米麼？
答案：
Math.pow(2, (18- zoom)); //把地图级别带进去，就能得出各个级别下1px对应多少米
问题：刚接触百度地图有很多基础问题不明白。
解决方案：
如何在地图上添加各种控件？
首先，我们来了解一下，百度API到底提供哪些控件呢？
查看API首页->类参考->控件类，我们会发现如下控件类：鱼骨、鹰眼、比例尺、2D3D转换控件、版权控件。
---------------------------------------------------------------------------------------------------------------------
1、鹰眼，又称缩略图控件——OverviewMapControl
map.addControl(new BMap.OverviewMapControl()); //为地图添加鹰眼控件
如上图，左边为关闭（默认）；右边为开启。
鹰眼默认为关闭状态，可以利用{isOpen:1}属性，使它开启。
map.addControl(new BMap.OverviewMapControl({isOpen:1})); //开启鹰眼
同时，我们还可以利用anchor属性，改变控件的位置。一共有四个位置可以选择，分别是：
BMAP_ANCHOR_TOP_LEFT 左上
BMAP_ANCHOR_TOP_RIGHT 右上
BMAP_ANCHOR_BOTTOM_LEFT 左下
BMAP_ANCHOR_BOTTOM_RIGHT 右下
map.addControl(new BMap.OverviewMapControl({isOpen: 1, anchor: BMAP_ANCHOR_TOP_RIGHT})); //开启鹰眼，位置在右上方
点击这里运行代码（鹰眼，开启状态，位置右上角）
---------------------------------------------------------------------------------------------------------------------
2、鱼骨，别名地图平移缩放控件——NavigationControl
map.addControl(new BMap.NavigationControl()); //为地图添加鱼骨（默认）
鱼骨有4种模式：
BMAP_NAVIGATION_CONTROL_LARGE 表示显示完整的平移缩放控件。（默认）
BMAP_NAVIGATION_CONTROL_SMALL 表示显示小型的平移缩放控件。
BMAP_NAVIGATION_CONTROL_PAN 表示只显示控件的平移部分功能。
BMAP_NAVIGATION_CONTROL_ZOOM 表示只显示控件的缩放部分功能。
现在，我们去掉刚才的默认鱼骨，换上一个迷你鱼骨。
你只需要在刚才的代码上，加上迷你鱼骨的类型即可。如下：
map.addControl(new BMap.NavigationControl({type: BMAP_NAVIGATION_CONTROL_SMALL})); //为地图添加鱼骨（迷你型）
点击这里运行代码（迷你鱼骨）。
---------------------------------------------------------------------------------------------------------------------
3、比例尺控件——ScaleControl
map.addControl(new BMap.ScaleControl()); //为地图添加比例尺
由于百度API是免费的，百度要求使用百度API开发的地图，必须使用带上百度的logo。
但有时候这个logo挺“碍事儿”的，经常会挡住比例尺。怎么办呢？我们又不能去掉这个logo。
因此，我们需要利用offset来规定控件的偏移。
offset: new BMap.Size(5,40) 表示，距离左下角的原点，偏移X=5，Y=40像素的位置。
map.addControl(new BMap.ScaleControl({offset: new BMap.Size(5, 40)})); //添加一个带上偏移量的比例尺
点击这里运行代码。（偏移后的比例尺）
---------------------------------------------------------------------------------------------------------------------
4、2D3D切换控件，又叫做地图类型控件——MapTypeControl
只要使用3D地图，都需要设置当前城市位置。
目前，只支持北上广深四个城市的3D地图显示。
map.addControl(new BMap.MapTypeControl()); //为地图添加2D3D切换控件
map.setCurrentCity("北京"); // 仅当设置城市信息时，MapTypeControl的切换功能才能可用
点击这里运行代码。（3D图控件）
---------------------------------------------------------------------------------------------------------------------
5、版权控件——CopyrightControl
版权信息的属性中，id为数字，必须写一个。
content里面的格式可以是html的，这样就可以加图片，或者超链接了。
var myCopyright =new BMap.CopyrightControl({offset: new BMap.Size(82, 0)}); //设置版权信息偏移量
map.addControl(myCopyright); //为地图添加版权控件
myCopyright.addCopyright({id : 1, content : '<a >我是版权信息哦</a$amp;>apos;$});
---------------------------------------------------------------------------------------------------------------------
运行全部代码，请点击这里。（控件安装完毕，包括：鹰眼、鱼骨、比例尺、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=";services=false"$amp;>amp;$lt;/script>
</head>
<body>
<div id="milkMap"$amp;>amp;$lt;/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 $amp;>amp;$lt;img src="" />酸奶小妹的博客园</a$amp;>apos;$});
</script>
</html>
---------------------------------------------------------------------------------------------------------------------
复习要点：
控件有4个位置可以摆放，利用anchor属性；
控件还可以设置偏移量，做位置的调整，需要用到offset属性；
鹰眼可以设定开启，和关闭的状态，用到isOpen属性；
鱼骨有四种模式可以选择，使用type属性；
版权信息是可以写入html的，使用版权必须写入id属性。
---------------------------------------------------------------------------------------------------------------------
小知识：
你知道比例尺的一像素对应的是几米麼？
答案：
Math.pow(2, (18- zoom)); //把地图级别带进去，就能得出各个级别下1px对应多少米
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
