baidu地圖讓多個標註出如今最佳視野

時間 2019-11-12

標籤地圖多個注出如今最佳視野简体版

原文原文鏈接

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

摘要：php

　　「我有一堆標註，不規則的散落在地圖的各個地方，我想把它們展現在一個最佳視野中，怎麼辦呢？」一位API愛好者諮詢道。html

-----------------------------------------------------------------------------------------------------------------java

咱們在百度地圖API的類參考裏，找到這個一個類，setViewport 。可讓一系列的標註，在地圖上呈現最佳視野。api

那麼，咱們該如何作呢？數組

1、建立地圖ui

創建一個htm文件，把基本的地圖程序拷貝進去。最基礎的地圖示例，請點擊這裏，而後獲取代碼。spa

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

2、建立點數組3d

隨意建立7個點，放到一個數組裏。code

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)
];

3、建立標註

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]);

4、顯示標註

map.addOverlay(marker1);                    //顯示7個標註
map.addOverlay(marker2);
map.addOverlay(marker3);
map.addOverlay(marker4);
map.addOverlay(marker5);
map.addOverlay(marker6);
map.addOverlay(marker7);

5、初始化地圖

map.centerAndZoom(points[6], 16);                 // 初始化地圖，設置中心點座標和地圖級別
map.addControl(new BMap.NavigationControl());      //爲地圖添加魚骨

6、讓標註顯示在最佳視野內

爲其中一個marker添加點擊事件，讓這7個標註顯示在最佳視野內。

marker7.addEventListener("click",function(){        //爲marker7添加事件
    map.setViewport(points);　　　　　　　　　　　　　　
});

7、若是你想作更多的設置，能夠看看這個類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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。