【百度地图API】——如何让标注自动呈现在最佳视野内
摘要：
“我有一堆标注，不规则的散落在地图的各个地方，我想把它们展示在一个最佳视野中，怎么办呢？”一位API爱好者咨询道。
-----------------------------------------------------------------------------------------------------------------
我们在百度地图API的类参考里，找到这个一个类，setViewport 。 可以让一系列的标注，在地图上呈现最佳视野。
那么，我们该如何做呢？
一、创建地图
建立一个htm文件，把基本的地图程序拷贝进去。最基础的地图示例，请点击这里，然后获取代码。
var map = new BMap.Map("container"); //地图容器
二、创建点数组
随意创建7个点，放到一个数组里。
var points = [ //创建7个点
new BMap.Point(116.401801,39.912114),
new BMap.Point(116.402802,39.912225),
new BMap.Point(116.403803,39.912336),
new BMap.Point(116.404804,39.912447),
new BMap.Point(116.405805,39.912558),
new BMap.Point(116.406806,39.912669),
new BMap.Point(116.407804,39.912123)
];
三、创建标注
var marker1 = new BMap.Marker(points[]); //创建7个标注
var marker2 = new BMap.Marker(points[]);
var marker3 = new BMap.Marker(points[]);
var marker4 = new BMap.Marker(points[]);
var marker5 = new BMap.Marker(points[]);
var marker6 = new BMap.Marker(points[]);
var marker7 = new BMap.Marker(points[]);
四、显示标注
map.addOverlay(marker1); //显示7个标注
map.addOverlay(marker2);
map.addOverlay(marker3);
map.addOverlay(marker4);
map.addOverlay(marker5);
map.addOverlay(marker6);
map.addOverlay(marker7);
五、初始化地图
map.centerAndZoom(points[], ); // 初始化地图，设置中心点坐标和地图级别
map.addControl(new BMap.NavigationControl()); //为地图添加鱼骨
六、让标注显示在最佳视野内
为其中一个marker添加点击事件，让这7个标注显示在最佳视野内。
marker7.addEventListener("click",function(){ //为marker7添加事件
map.setViewport(points);
});
七、如果你想做更多的设置，可以看看这个类ViewportOptions 。
---------------------------------------------------------------------------
下图为初始化后的地图
下图为最佳视野内的7个标注
全部源代码：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>自动调整视野</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
</head>
<body>
<div style="width:800px;height:400px;border:1px solid gray" id="container"></div>
</body>
</html>
<script type="text/javascript">
var map = new BMap.Map("container"); //地图容器
var points = [ //创建7个点
new BMap.Point(116.401801,39.912114),
new BMap.Point(116.402802,39.912225),
new BMap.Point(116.403803,39.912336),
new BMap.Point(116.404804,39.912447),
new BMap.Point(116.405805,39.912558),
new BMap.Point(116.406806,39.912669),
new BMap.Point(116.407804,39.912123)
];
var marker1 = new BMap.Marker(points[0]); //创建7个标注
var marker2 = new BMap.Marker(points[1]);
var marker3 = new BMap.Marker(points[2]);
var marker4 = new BMap.Marker(points[3]);
var marker5 = new BMap.Marker(points[4]);
var marker6 = new BMap.Marker(points[5]);
var marker7 = new BMap.Marker(points[6]);
map.addOverlay(marker1); //显示7个标注
map.addOverlay(marker2);
map.addOverlay(marker3);
map.addOverlay(marker4);
map.addOverlay(marker5);
map.addOverlay(marker6);
map.addOverlay(marker7);
map.centerAndZoom(points[6], 16); // 初始化地图，设置中心点坐标和地图级别
map.addControl(new BMap.NavigationControl()); //为地图添加鱼骨
var label = new BMap.Label("点击这个标注，展现7个标注的最佳视野",{position : points[6], offset: new BMap.Size(3,-6)}); //定义一个文字标签，注意1.2请用position
map.addOverlay(label);
marker7.addEventListener("click",function(){ //为marker7添加事件
map.setViewport(points);
});
</script>
【百度地图API】——如何让标注自动呈现在最佳视野内的更多相关文章
- 百度地图Api之自定义标注：（获得标注的经纬度和中心经纬度即缩放度）
百度地图Api之自定义标注:(获得标注的经纬度和中心经纬度即缩放度) <%@ Page Language="C#" AutoEventWireup="true&qu ...
- baidu地图让多个标注出现在最佳视野
原文:http://www.cnblogs.com/milkmap/archive/2011/08/23/2150641.html 摘要: “我有一堆标注,不规则的散落在地图的各个地方,我想把它们展示 ...
- Android应用中使用百度地图API并加入标注（一）
网上一些资料这样的的内容已经过时了,这里是最新的内容,假设哪里不正确,请吐槽... 1)下载百度地图移动版API(Android)开发包 要在Android应用中使用百度地图API,就须要 ...
- 百度地图API的使用
------------------自说自话----------------------------- 好奇怪,习惯性使用有道云笔记记录心得与知识后就很少用博客园来记录了. 但是后来想想,有些东西还是 ...
- 百度地图API显示多个标注点并添加百度样式检索窗口
原作者博客地址:http://blog.csdn.net/a497785609/article/details/24009031 在此基础上进行了修改: 1.添加闭包,将i传入内部 2.添加地图和卫星 ...
- 百度地图API多个点聚合时，标注添加的标签label地图刷新就丢失的问题解决
当将自定义的Marker(含有Label)通过MarkerClusterer 管理的时候,当地图发生任何移动.缩放 的时候,Marker 的Label 就会自动消失. 这个问题主要是由于百度的点聚合A ...
- 百度地图API 添加自定义标注 多点标注
原文:百度地图API 添加自定义标注 多点标注 分四个文件 location.php map.css 图片 数据库 数据库配置自己改下 -------------------------------- ...
- 百度地图API显示多个标注点带百度样式信息检索窗口的代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 百度地图api 实例 自动提示 并计算两地的行驶距离
百度地图api 实例 自动提示 并计算两地的行驶距离 <!DOCTYPE html> <html> <head> <meta http-equiv=" ...
随机推荐
- android 常见的解决（mdpi、hdpi 、xhdpi、xxhdpi ）屏幕调整
查询到执行的system service后,就能够在dumpsys后面加上service的名字,查看指定的service信息. adb shell dumpsys activity adb shell ...
- robot framework 使用三：他们主动浏览器的兼容性
robot framework 浏览器兼容性测试 上图中黄色圈的地方默认什么都不写,是firefox浏览器.写上ie就是ie浏览器了 firefox最新版本号即可,ie须要设置: 1. IE选项设置的 ...
- [three.js] 地图不能解决重复的问题 Solving with Texture RepeatWrapping Fail Issue
有些事情,如果你正在寻找侯,怎么也找不到. 有的东西,不经意间,到处: 我认为这是生活中常有的事. 然而,在互联网的浩瀚大海,这同样适用. 正常的一小会儿的积累, 投入少, 积累, 洋大海, 载起一帆 ...
- ios说说自己的计划是什么样的发展论坛
ios发展论坛在显示 iOS 5 在,主界面包含以下内置的应用程序: 信息.日历.照片. YouTube.股市.地图(AGPS辅助的Google地图).天气.时间.计算机.备忘录.系统设置. ...
- MongoDB(三)——CRUD
MongoDB作为非关系型数据库.还是传统数据库的增删改查有很大的差别的.这里仅仅是将知识点进行了一下提纲挈领,实际用的时候.我们百度一下具体使用方法就可以. 先看大的几个方面: 一.对于里边的插入和 ...
- NYOJ 1068 ST（段树 为段更新+间隔总和）
ST 时间限制:1000 ms | 内存限制:65535 KB 难度:1 描写叙述 "麻雀"lengdan用随机数生成了后台数据.可是笨笨的他被妹纸的问题给难住了. .. 已知 ...
- leetcode-2 Add Two Numbers 计算两个对应的列表和问题
1.问题描写叙述: You are given two linked lists representing two non-negativenumbers. The digits are sto ...
- WPF学习（3）布局
今天我们来说说WPF的布局.我们知道WinForm的布局主要是采用基于坐标的方式,当窗口内容发生变化时,里面的控件不会随之动态调整,这就造成了一个很不好的用户体验.而WPF为了避免这个缺点,采用了基于 ...
- 必须掌握的八个cmd命令
原文:必须掌握的八个cmd命令 一.ping 它是用来检查网络是否通畅或者网络连接速度的命令.作为一个生活在网络上的管理员或者黑客来说,ping命令是第一个必须掌握的DOS命令,它所利用的原理是这样的 ...
- gradle中使用cobertura做代码覆盖(转)
gradle很好用,但是默认是没有代码覆盖功能的,只好自己写.曾经在网上找到过别人的一段脚本,虽然也能用,但是有一些不爽的地方,一个原因是它不支持对层级工程中全部代码的覆盖,另一个原因是它用替换bui ...