原文:【百度地图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】——如何让标注自动呈现在最佳视野内的更多相关文章

  1. 百度地图Api之自定义标注：（获得标注的经纬度和中心经纬度即缩放度）

    百度地图Api之自定义标注:(获得标注的经纬度和中心经纬度即缩放度) <%@ Page Language="C#" AutoEventWireup="true&qu ...

  2. baidu地图让多个标注出现在最佳视野

    原文:http://www.cnblogs.com/milkmap/archive/2011/08/23/2150641.html 摘要: “我有一堆标注,不规则的散落在地图的各个地方,我想把它们展示 ...

  3. Android应用中使用百度地图API并加入标注（一）

    网上一些资料这样的的内容已经过时了,这里是最新的内容,假设哪里不正确,请吐槽... 1)下载百度地图移动版API(Android)开发包       要在Android应用中使用百度地图API,就须要 ...

  4. 百度地图API的使用

    ------------------自说自话----------------------------- 好奇怪,习惯性使用有道云笔记记录心得与知识后就很少用博客园来记录了. 但是后来想想,有些东西还是 ...

  5. 百度地图API显示多个标注点并添加百度样式检索窗口

    原作者博客地址:http://blog.csdn.net/a497785609/article/details/24009031 在此基础上进行了修改: 1.添加闭包,将i传入内部 2.添加地图和卫星 ...

  6. 百度地图API多个点聚合时，标注添加的标签label地图刷新就丢失的问题解决

    当将自定义的Marker(含有Label)通过MarkerClusterer 管理的时候,当地图发生任何移动.缩放 的时候,Marker 的Label 就会自动消失. 这个问题主要是由于百度的点聚合A ...

  7. 百度地图API 添加自定义标注 多点标注

    原文:百度地图API 添加自定义标注 多点标注 分四个文件 location.php map.css 图片 数据库 数据库配置自己改下 -------------------------------- ...

  8. 百度地图API显示多个标注点带百度样式信息检索窗口的代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 百度地图api 实例 自动提示 并计算两地的行驶距离

    百度地图api 实例 自动提示 并计算两地的行驶距离 <!DOCTYPE html> <html> <head> <meta http-equiv=" ...

随机推荐

  1. linux 下一个 osw先从操作系统和标准脚本主动发起

    linux 下一个 osw与操作系统的引导和启动标准的脚本.osw它指的是--os watcher,这是一个显示器os这些指标shell脚本.osw监测数据一般使用oracle技能评估os资源的使用, ...

  2. JMS分布式应用程序异步消息解决方案EhCache 高速缓存同步问题

    部分博客中描述的使用拦截器怎么用EJB公布的WebService加入缓存,这样能够提高WebService的响应效率.但是即使是这样做,还是要经历网络的传输的.于是决定在调用WebService的程序 ...

  3. Android官方技术文档翻译——Gradle 插件用户指南（1-3）

    不知道是什么网络问题,上午一直发不了博客,其它页面基本正常,就是在写博客这里,每次打开都是响应超时.刚才用了VPN,顺便试了一下,竟然能够编辑.想是CDN之类的问题吧. 这次翻译的是Gradle 插件 ...

  4. Solr/SolrCloud -error

    状态 2014-08-20 10:46:22,356 INFO [coreZkRegister-1-thread-1] [org.apache.solr.cloud.ShardLeaderElecti ...

  5. ASP.NET跨平台

    ASP.NET跨平台最佳实践 前言 八年的坚持敌不过领导的固执,最终还是不得不阔别已经成为我第二语言的C#,转战Java阵营.有过短暂的失落和迷茫,但技术转型真的没有想象中那么难.回头审视,其实单从语 ...

  6. 第三篇——第二部分——第三文 配置SQL Server镜像——域环境

    原文:第三篇--第二部分--第三文 配置SQL Server镜像--域环境 原文出处:http://blog.csdn.net/dba_huangzj/article/details/28904503 ...

  7. nginx+tomcat实现动静分离（转）

    本文设计的动静分离结构 在本文中,我们将静态资源放在 A 主机的一个目录上,将动态程序放在 B 主机上,同时在 A 上安装 Nginx 并且在 B 上安装 Tomcat.配置 Nginx,当请求的是 ...

  8. Python网络02 Python服务器进化

    原文:Python网络02 Python服务器进化 作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! **注意,在Python 3. ...

  9. spring中间scope详细解释

    0.思维导图 1. scope概论 spring中scope是一个很关键的概念.简单说就是对象在spring容器(IOC容器)中的生命周期,也能够理解为对象在spring容器中的创建方式. 2. sc ...

  10. “NET网络”进行中，多管齐下的人才力挫“”粗俗

            随着互联网的迅猛发展,一些不太干净.低俗的甚至色情的内容不断浮现.不仅严重影响了我们的上网体验,也成为扰乱互联网正常秩序的罪魁祸首,部分不法内容甚至给网民造成了一定的財产损失.在这样的 ...