原文: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. hbase 单机模式安装

    1:下载安装包(我下载的0.94版本,如果考虑后期与hadoop兼容,需要找合适的版本) http://mirrors.hust.edu.cn/apache/hbase/hbase-0.94.20/h ...

  2. Win7 32位系统下Java开发环境的安装及配置

    目录: Java JDK安装. Java JDK系统环境的配置. 配置常见问题的解决. Java JDK的安装 Java Jdk(Java Development Kit)Java开发不可缺少的环境, ...

  3. unity绘制线和绘制面

    绘制线条代码,其实就是指定至少两个点,然后赋予贴图即可,不废话,上代码: using UnityEngine; using System.Collections; public class LineT ...

  4. STL set容器添加结构体并排序

    #include <iostream> #include <string> #include <cstring> //strcpy #include <cst ...

  5. overflow应用随记

    今天在帮别人改页面时遇到了overflow属性,虽然对他已经比较熟悉了,但还是去专门查找了一下.和大家分享下. overflow 属性规定当内容溢出元素框时发生的事情. 这个属性定义溢出元素内容区的内 ...

  6. Scala学习笔记--隐式转换

    隐式转换的规则:1.无歧义规则:隐式转换唯有不存在其他可插入转换的前提下才能插入  若编译器有两种方法修正x+y 如convert1(x)+y,convert2(x)+y,会报错2.单一调用规则:只尝 ...

  7. Block（二）内存管理与其他特性

    一.block放在哪里 我们针对不同情况来讨论block的存放位置: 1.栈和堆 以下情况中的block位于堆中: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 ...

  8. Effective Java实作equals() - 就是爱Java

    equals()这个方法,定义在Object class中,这个是所有class的base class,因此所有的class都继承这个方法,默认是比较内存地址,不过Mix需要的是商业规则上的比较,所以 ...

  9. (转)C#在父窗口中调用子窗口的过程(无法访问已释放的对象)

    C#在父窗口中调用子窗口的过程: 1. 创建子窗口对象 2. 显示子窗口对象   笔者的程序中,主窗体MainFrm通过菜单调用子窗口ChildFrm.在窗体中定义了子窗口对象,然后在菜单项点击事件中 ...

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

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