原文: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. Jquery：强大的选择器<二>

    今天跟着资料做了一个示例,为什么我感觉自己做的没书上的好看呢?好吧,我承认自己对css样式只懂一点皮毛,我也不准备深度的去学习它,因为……公司有美工嘛! 这个小示例只是实现了元素的隐藏和显示.元素cl ...

  2. silverlight+wcf 获得web参数

    可以由wcf直接得到参数 ,具体代码如下: using System;using System.Linq;using System.Runtime.Serialization;using System ...

  3. 系统提供的UIImagePickerController

    1.从系统相册中读取 /* 判断选择的读取类型是否支持 UIImagePickerControllerSourceTypePhotoLibrary,普通相册 UIImagePickerControll ...

  4. hdu4006 优先队列

    A - 签到 Crawling in process... Crawling failed Time Limit:1000MS     Memory Limit:65768KB     64bit I ...

  5. Linux下运行C++程序出现"段错误(核心已转储)"的原因

    今天写程序出现了“段错误(核心已转储)"的问题,查了一下资料,加上自己的实践,总结了以下几个方面的原因. 1.内存访问出错  这类问题的典型代表就是数组越界. 2.非法内存访问 出现这类问题 ...

  6. Linux - SSH - Password-less login - generate public key - migrate data without password between two VM servers

    SUMMARY:two server : A , Bsource server : Adestination server : Bthe steps of migrate data from A to ...

  7. IOS 音频播放

    iOS音频播放 (一):概述 前言 从事音乐相关的app开发也已经有一段时日了,在这过程中app的播放器几经修改我也因此对于iOS下的音频播放实现有了一定的研究.写这个系列的博客目的一方面希望能够抛砖 ...

  8. FPGA技术的一些基本概念（综合、BlackBox）（转）

    原文:http://blog.sina.com.cn/s/blog_6254a8ca0100i0wr.html 原文也是转的,哈哈,大家多转转,转转更健康.删除了一些Xilinx的东西 前言 综合是将 ...

  9. Linux文件夹执行权限

    在Linux中,文件有三种权限--可读,可写,可执行.目录也有三种权限--可读,可写,可执行.但是实际上他们有着不同的意义. 对于文件: 可读 :表示可以读取文件里的数据: 可写 :表示可以改变和删除 ...

  10. NOI2012 Day1

    NOI2012 Day1 随机数生成器 题目描述:给出数列\(X_{n+1}=(aX_n+c)mod m\),求\(X_n mod g\) solution: 矩阵乘法,但数有可能在运算时爆\(lon ...