原文:http://www.cnblogs.com/milkmap/archive/2011/08/23/2150641.html

摘要：

　　“我有一堆标注，不规则的散落在地图的各个地方，我想把它们展示在一个最佳视野中，怎么办呢？”一位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[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());      //为地图添加鱼骨

　　

　

六、让标注显示在最佳视野内

为其中一个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>

　　

baidu地图让多个标注出现在最佳视野的更多相关文章

  1. 【百度地图API】——如何让标注自动呈现在最佳视野内

    原文:[百度地图API]--如何让标注自动呈现在最佳视野内 摘要: “我有一堆标注,不规则的散落在地图的各个地方,我想把它们展示在一个最佳视野中,怎么办呢?”一位API爱好者咨询道. -------- ...

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

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

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

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

  4. 【百度地图API】建立全国银行位置查询系统（三）——如何在地图上添加银行标注

    原文:[百度地图API]建立全国银行位置查询系统(三)--如何在地图上添加银行标注 <摘要>你将在第三章中学会以下知识: 如何在地图上添加带银行logo的标注?(你也可以换成商场logo, ...

  5. 使用百度地图LBS创建自定义标注

    <body> <div id="allmap"></div> <div class="sel_container" i ...

  6. Angularjs+node+Mysql实现地图上的多点标注

    注:本文适合对于node有一定基础的人,如果您是小白,请先用1个小时学习node.node文档https://nodejs.org/en/docs/ 该片博文的源码地址:https://github. ...

  7. 如何签名apk，并让baidu地图正常显示

    1.选中项目,右击export Next直到完成,这样就生成了my.keystore文件 将my.keystore拷到C:\Users\Administrator\.android 利用jdk的工具生 ...

  8. 怎样将baidu地图中的baidu logo 去掉

    今天我的老大问我是不是能够将baidumap 的js版中baidu logo 去掉. 我上网查询一下,有各种方法.比方将相应的logo div remove hide 等等,这些都是须要JS 函数触发 ...

  9. 如何将baidu地图中的baidu logo 去掉

    今天我的老大问我是不是可以将baidumap 的js版中baidu logo 去掉.我上网查询一下,有各种方法,比如将对应的logo div remove hide 等等,这些都是需要JS 函数触发执 ...

随机推荐

  1. Merge Sorted Array 合并数组并排序

    Given two sorted integer arrays nums1 and nums2, merge nums2 into nums1 as one sorted array. Note:Yo ...

  2. oracle学习笔记（三）oracle函数

    --oracle 函数 --lower(char):将字符串转换为小写格式 --upper(char):将字符串转换为大写格式 --length(char):返回字符串的长度 --substr(cha ...

  3. OpenGL ES 2.0 光照

    基本的光照 光照分成了3种组成元素(3个通道):环境光.散射光以及镜面光. 材质的反射系数实际指的就是物体被照射处的颜色,散射光强度指的是散射光中的RGB(红.绿.蓝)3个色彩通道的强度. 环境光 指 ...

  4. MAC Intellij IDEA 常用快捷键

    MAC Intellij IDEA 常用快捷键 Copy by: http://blog.csdn.net/cym492224103/article/details/40077253 Keymap 设 ...

  5. 基于lucene的案例开发：查询语句创建PackQuery

    转载请注明出处:http://blog.csdn.net/xiaojimanman/article/details/44656141 http://www.llwjy.com/blogdetail/1 ...

  6. CMS设计-组件化

    原来CMS使用的专题类的页面是 : 事先由前端写好完整页面,再交付给运营使用,这样使用的比较灵活,可以根据市场的不同需求由前端切出不同的页面,有时候一旦需求过多,就耽误切图的时间. 现在M和H5采用组 ...

  7. LNMP环境出现”504 gateway time-out”错误的解决方案

    今天下午在调试测试VPS机器的时候,出现"504 gateway time-out"错误提示.VPS是安装的LNMP一键安装包,关于这个错误之前还没有见过,网上看到比较多的是502 ...

  8. dobbo学习

    http://www.cnblogs.com/Javame/p/3632473.html 1. Dubbo是什么? Dubbo是一个分布式服务框架,致力于提供高性能和透明化的RPC远程服务调用方案,以 ...

  9. C# LinkButton 带参数的OnCommand事件的写法

    前台: <asp:TemplateField HeaderText ="操作"> <HeaderStyle HorizontalAlign ="Cent ...

  10. Latch-up 閂鎖效應 & 靜電放電模式

    * * Latch-up 閂鎖效應, 又稱寄生PNPN效應或可控矽整流器 ( SCR, Silicon Controlled Rectifier ) 效應. 在整體矽的CMOS 管下, 不同極性攙雜的 ...