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

摘要:

  “我有一堆标注,不规则的散落在地图的各个地方,我想把它们展示在一个最佳视野中,怎么办呢?”一位API爱好者咨询道。

—————————————————————————————————————–

我们在百度地图API的类参考里,找到这个一个类,setViewport 。 可以让一系列的标注,在地图上呈现最佳视野。


那么,我们该如何做呢?

一、创建地图

建立一个htm文件,把基本的地图程序拷贝进去。最基础的地图示例,请点击这里,然后获取代码。

var map = new BMap.Map"container");    //地图容器

  

二、创建点数组

随意创建7个点,放到一个数组里。

var points = [                          //创建7个点
new BMap.Point116.401801,39.912114),
new BMap.Point116.402802,39.912225),
new BMap.Point116.403803,39.912336),
new BMap.Point116.404804,39.912447),
new BMap.Point116.405805,39.912558),
new BMap.Point116.406806,39.912669),
new BMap.Point116.407804,39.912123)
];

  

三、创建标注

var marker1 = new BMap.Markerpoints[0]);   //创建7个标注
var marker2 = new BMap.Markerpoints[1]);
var marker3 = new BMap.Markerpoints[2]);
var marker4 = new BMap.Markerpoints[3]);
var marker5 = new BMap.Markerpoints[4]);
var marker6 = new BMap.Markerpoints[5]);
var marker7 = new BMap.Markerpoints[6]);

  

四、显示标注

map.addOverlaymarker1);                    //显示7个标注
map.addOverlaymarker2);
map.addOverlaymarker3);
map.addOverlaymarker4);
map.addOverlaymarker5);
map.addOverlaymarker6);
map.addOverlaymarker7);

 

五、初始化地图

map.centerAndZoompoints[6], 16);                 // 初始化地图,设置中心点坐标和地图级别
map.addControlnew BMap.NavigationControl)); //为地图添加鱼骨

  

 

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

为其中一个marker添加点击事件,让这7个标注显示在最佳视野内。

marker7.addEventListener"click",function){        //为marker7添加事件
map.setViewportpoints);              
});

  

七、如果你想做更多的设置,可以看看这个类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="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.Point116.401801,39.912114),
new BMap.Point116.402802,39.912225),
new BMap.Point116.403803,39.912336),
new BMap.Point116.404804,39.912447),
new BMap.Point116.405805,39.912558),
new BMap.Point116.406806,39.912669),
new BMap.Point116.407804,39.912123)
];
var marker1 = new BMap.Markerpoints[0]); //创建7个标注
var marker2 = new BMap.Markerpoints[1]);
var marker3 = new BMap.Markerpoints[2]);
var marker4 = new BMap.Markerpoints[3]);
var marker5 = new BMap.Markerpoints[4]);
var marker6 = new BMap.Markerpoints[5]);
var marker7 = new BMap.Markerpoints[6]);
map.addOverlaymarker1);
//显示7个标注
map.addOverlaymarker2);
map.addOverlaymarker3);
map.addOverlaymarker4);
map.addOverlaymarker5);
map.addOverlaymarker6);
map.addOverlaymarker7);

map.centerAndZoompoints[
6], 16); // 初始化地图,设置中心点坐标和地图级别
map.addControlnew BMap.NavigationControl)); //为地图添加鱼骨

var label = new BMap.Label"点击这个标注,展现7个标注的最佳视野",{position : points[6], offset: new BMap.Size3,-6)}); //定义一个文字标签,注意1.2请用position
map.addOverlaylabel);

marker7.addEventListener
"click",function){ //为marker7添加事件
map.setViewportpoints);
});

</script>

  

Published by

风君子

独自遨游何稽首 揭天掀地慰生平

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注