【百度地图API】——如何让标注自动呈现在最佳视野内
2024-10-12 18:26:37
摘要:
“我有一堆标注,不规则的散落在地图的各个地方,我想把它们展示在一个最佳视野中,怎么办呢?”一位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>
最新文章
- cocos2d学习记录
- jNotify:操作结果信息提示条
- C#基础---委托的使用
- Redis集群知识解析
- Java-transient
- C#的winform拼数字游戏
- Apple Watch: WatchKit 应用程序要点
- 【JS】Intermediate6:jQuery
- 51驱动LCD1602
- WDA 程序文本翻译OTR
- 程序员的自我救赎---1.4.2: 核心框架讲解(BLL&;Tool)
- 参加完Rocket MQ Meetup深圳站,回顾和想法
- 解决java.lang.NoSuchMethodError:org.joda.time.DateTime.withTimeAtStartOfDay() Lorg/joda/time/DateTime
- [Pelican]Pelican入门(二)
- 在本地运行正常的静态网页放到tomcat中却显示异常的原因
- Android 通过onTouchEvent判断是否为双击事件
- pip install Yellowfin失败的问题
- golang导入包的几个说明:import
- vbs 解析 html 文档
- 公共的Json操作C#类
热门文章
- 有人实践过 Phabricator 以及 Arcanist 作为 code review 的工具么?(转)
- iphone内容开发技术学习
- ExtJS4 根据分配不同的树形菜单在不同的角色登录后
- [生产环境数据恢复]innobackupex: fatal error: OR no &;#39;datadir&;#39; option in group &;#39;mysqld&;#39; in MySQL options
- LeetCode Solutions : Reorder List
- Android系统APN配置具体解释
- [ACM] HDU 1227 Fast Food (经典Dp)
- 第十九章——使用资源调控器管理资源(2)——使用T-SQL配置资源调控器
- 经纪xx系统节点VIP案例介绍和深入分析异常
- 第十六章——处理锁、阻塞和死锁(3)——使用SQLServer Profiler侦测死锁