【百度地图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=" ...
随机推荐
- 怎样解决No architectures to compile for (ONLY_ACTIVE_ARCH=YES, active arch=x86_64, VALID_ARCHS=i386).
怎样解决No architectures to compile for (ONLY_ACTIVE_ARCH=YES, active arch=x86_64, VALID_ARCHS=i386). 错误 ...
- Web指纹识别目的Discuz识别+粗糙的版本演绎
这个识别程序是本学期在我的职业培训项目.它是做一类似至Zoomeye怪东西,然后使用ES集成,为了让搜索引擎寻找.因此,我们必须首先去网上识别相应的能力Web包裹,如果用户输入的关键词:Discuz ...
- 【C语言探索之旅】 第三部分第二课：SDL开发游戏之创建窗口和画布
内容简介 1.第三部分第二课: SDL开发游戏之创建窗口和画布 2.第三部分第三课预告: SDL开发游戏之显示图像 第三部分第二课:SDL开发游戏之创建窗口和画布 在上一课中,我们对SDL这个开源库做 ...
- LatinIME输入法分析
输入法的设置在res/xml/method.xml的<input-method>标签中,主要设置两个属性: android:settingsActivity,输入法的设置程序入口. and ...
- POJ 2217 Secretary (后缀数组)
标题效果: 计算两个公共串串最长的字符串的长度. IDEAS: 这两个组合的字符串. 然后直接确定运行后缀数组height 然后,你可以直接扫描一次height .加个是不是在一个串中的推断就能够了. ...
- Hibernate-----5、持久化对象
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaGVrZXdhbmd6aQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQk ...
- [原创].NET 分布式架构开发实战五 Framework改进篇
原文:[原创].NET 分布式架构开发实战五 Framework改进篇 .NET 分布式架构开发实战五 Framework改进篇 前言:本来打算这篇文章来写DAL的重构的,现在计划有点改变.之前的文章 ...
- 在eclipse中启动tomcat时报错：could not create java virtual machine... a fatal error...
控制台报错:unrecoginzed option: --launcher XXMaxPermSize 解决方法:-〉 perference -> tomcat ->JVM setting ...
- C# 中使用WebClient 请求 https
WebClient 请求 启用SSL的站点 时,如果站点的证书是不可信的,请求会被阻止,解决办法如下: 添加以下代码: ServicePointManager.ServerCertificateVal ...
- Cocos2d-x3.2游戏的核心循环在Application，怎样处理FPS不稳
今天天气非常阴,立即要下雨了,陈吃早点功夫写点东西, 一场秋雨一场寒,十场秋雨要穿棉,各位从今往后多穿点 int Application::run() { if(!applicationDidFini ...