百度地圖衛星二維

時間 2019-11-21

標籤百度地圖衛星二維简体版

原文原文鏈接

百度地圖API推出衛星圖接口也有一個月啦~ javascript

本文除了介紹如何使用百度地圖API來操做衛星圖外，還順帶製做了個衛星圖對比工具。css

1、百度地圖API衛星圖html

調用百度衛星圖有兩種方式，一是地圖類型控件，一是地圖底圖設置。下面分別介紹這兩種方法：java

一、利用控件api

使用控件有一大優點，就是地圖類型控件上，有百度所有的地圖類型，好比二維、三維、衛星等。函數

並且，只須要一句話，就能簡單加上這個控件。工具

map.addControl(new BMap.MapTypeControl());          //添加地圖類型控件

看到下圖中，右上角那個控件了麼？這個就是地圖類型控件啦~ui

添加她只需一句話，很簡單吧。google

所有源代碼：spa

按 Ctrl+C 複製代碼

更多關於地圖類型控件的知識：（初學者可不看，上面的代碼已經足夠用啦~）

MapTypeControl是負責切換地圖類型的控件，此類繼承Control全部功能。

MapTypeControlOptions表示MapTypeControl構造函數的可選參數。它沒有構造函數，但可經過對象字面量形式表示（自 1.2 新增）。

MapTypeControlType常量表示MapTypeControl的外觀樣式（自 1.2 新增）。

下面來看看第二種方法。若是你只須要衛星圖，不須要別的地圖類型，你就須要下面這種方法了。一樣至關簡單，也是一句話就搞定的事情~

二、修改地圖底圖默認設置

var map = new BMap.Map("container",{mapType: BMAP_HYBRID_MAP});      //設置衛星圖爲底圖

2、衛星圖對比工具

先來看圖。下圖中，左邊是百度的衛星圖，右邊是谷歌的衛星圖。

你們能夠看到，不管是顏色，仍是街道數據，都有明顯的不一樣。

固然，若是你學會這些代碼，你還能夠將其餘家API的衛星圖拿來對比呀~~

對比工具主要是有如下功能：

一、同時展現百度和谷歌的衛星圖

 // 百度衛星圖底圖
var bdMap = new BMap.Map("mapBaidu",{mapType: BMAP_HYBRID_MAP});           


//谷歌衛星圖底圖
var ggMap = new google.maps.Map(document.getElementById("mapGoogle"),{mapTypeId: google.maps.MapTypeId.SATELLITE});

二、拖動谷歌地圖，百度地圖跟着動（聯動效果）

給谷歌地圖添加拖拽事件，同理，也能夠給百度地圖添加。

在這裏取了近似值，沒有使用座標轉換工具。若是使用的話，應該會更加準確的。（搜索線性轉換，或者直接看源代碼）

google.maps.event.addListener(ggMap, 'dragend', function() {        
        blng = ggMap.center.lng() + 0.0065;
        blat = ggMap.center.lat() + 0.0060;
        bdMap.panTo(new BMap.Point(blng,blat));
    });

三、放大縮小谷歌地圖，百度地圖也跟着放大和縮小

原理同上。谷歌的地圖級別比百度小，因此要找一個地圖級別的對應關係。大概是

google.maps.event.addListener(ggMap, 'zoom_changed', function() {        
        bdMap.setZoom(ggMap.zoom+1);
    });

所有源代碼：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Map VS Baidu Map</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
<script type="text/javascript">
  function initialize() {
    var blng;
    var blat;
    var myOptions = {
      zoom: 14,
      center: new google.maps.LatLng(39.90564219683827,116.39948),
      panControl: false,
      zoomControl: false,
      scaleControl: false,
      mapTypeId: google.maps.MapTypeId.SATELLITE
    }
    var ggMap = new google.maps.Map(document.getElementById("mapGoogle"),myOptions);
    
    google.maps.event.addListener(ggMap, 'dragend', function() {        
        blng = ggMap.center.lng() + 0.0065;
        blat = ggMap.center.lat() + 0.0060;
        bdMap.panTo(new BMap.Point(blng,blat));
    });
    google.maps.event.addListener(ggMap, 'zoom_changed', function() {        
        bdMap.setZoom(ggMap.zoom+1);
    });
  }
</script>
</head>
<body onload="initialize()" style="width:100%;height:100%;">
    <div id="mapBaidu" style="width:50%;height:100%;float:left;">
        <script type="text/javascript">
            var bdMap = new BMap.Map("mapBaidu",{mapType: BMAP_HYBRID_MAP});            // 建立Map實例
　　　　　　　var point = new BMap.Point(116.4035,39.915);map.setCurrentCity("北京");          // 設置地圖顯示的城市 此項是必須設置的,由於要使用三維圖

            bdMap.centerAndZoom(point,15);                     // 初始化地圖,設置中心點座標和地圖級別。
            bdMap.addControl(new BMap.MapTypeControl());        //添加衛星圖控件
            bdMap.enableScrollWheelZoom();
        </script>
    </div>
    <div id="mapGoogle" style="width:50%;height:100%;float:left;"></div>
</body>
<script type="text/javascript">



</script>
</html>

相關標籤/搜索

每日一句

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

百度地圖 衛星 二維

百度地圖衛星二維