百度地圖API

来源:http://www.cnblogs.com/panhe-xue/archive/2016/09/24/5903833.html
-Advertisement-
Play Games

百度地圖API 百度地圖API當然在官方文檔學習更加清晰，我只是做一下我這2天研究一個總結。 首先，應該在上面的鏈接申請一個你的密鑰。 接著，顯示百度地圖，先上代碼再解釋： 創建地圖實例 這裡通過new 創建一個地圖實例，其中參數可以是id也可以是元素對象,用於在頁面上展現地圖，所以給html元素設 ...


　　百度地圖API

    百度地圖API當然在官方文檔學習更加清晰，我只是做一下我這2天研究一個總結。

    首先，應該在上面的鏈接申請一個你的密鑰。

    接著，顯示百度地圖，先上代碼再解釋：

   

 1 <!DOCTYPE html>  
 2 <html>  
 3 <head>  
 4 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
 6 <title>Hello, World</title>  
 7 <style type="text/css">  
 8 html{height:100%}  
 9 body{height:100%;margin:0px;padding:0px}  
10 #container{height:100%}  
11 </style>  
12 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=vjxRk3m3YYQ4uglexlrOxEVwGc2Nw6kF">
13 //v2.0版本的引用方式：src="http://api.map.baidu.com/api?v=2.0&ak=您的密鑰"
14 //v1.4版本及以前版本的引用方式：src="http://api.map.baidu.com/api?v=1.4&key=您的密鑰&callback=initialize"
15 </script>
16 </head>  
17  
18 <body>  
19 <div id="container"></div> 
20 <script type="text/javascript"> 
21 var map = new BMap.Map("container");          // 創建地圖實例  
22 var point = new BMap.Point(116.401,41.915);  // 創建點坐標  
23 map.centerAndZoom(point, 15);                 // 初始化地圖，設置中心點坐標和地圖級別
26 </script>  
27 </body>  
28 </html>

 

 var map=new BMap.Map('container');

     創建地圖實例

     這裡通過new 創建一個地圖實例，其中參數可以是id也可以是元素對象,用於在頁面上展現地圖，所以給html元素設置了下麵的樣式,使得地圖充滿 整個瀏覽器視窗.

<style type="text/css">  
html{height:100%}  
body{height:100%;margin:0px;padding:0px}  
#container{height:100%}  
</style>

 

 

 

var point=new BMap.Point(116.404,39.915);

我們通過BMap命名空間下的的Point類創建一個坐標點。116.404表示經度，39.915表示緯度。

 

 

map.centerAndZoom(point,15);

 對地圖進行初始化,BMap.Map.centerAndZoom()方法要求2個參數，一個中心點，一個是地圖的級別。只有進行了初始化以後才會有接下來對地圖的操作。

 

 添加控制項

//控制項參數設置 size type
var opts={offset:new BMap.Size(400,400),type: BMAP_NAVIGATION_CONTROL_ZOOM}
//添加控制項
map.addControl(new BMap.NavigationControl(opts)); //地圖平移縮放控制項
map.addControl(new BMap.OverviewMapControl());    //縮略地圖控制項
map.addControl(new BMap.ScaleControl(opts));      //比例尺控制項

控制項種類，控制項位置，以及控制項配置請詳見百度控制項API；

自定義控制項:

 8 //自定義控制項
 9 function selfControll(){
10        this.defaultAnchor=BMAP_ANCHOR_TOP_RIGHT;
11        this.defaultOffset=new BMap.Size(200,200); 
12 }
13 selfControll.prototype=new BMap.Control();
14 selfControll.prototype.initialize=function(map){
15      div=document.createElement("div");
16      div.appendChild(document.createTextNode("放大2級"));
17      div.style.cursor='pointer';
18      div.style.backgroundColor='red';
19      div.onclick=function(e){
20          map.zoomTo(map.getZoom()+2);
21      }
22      //map.getContainer().id   --返回container
23     map.getContainer().appendChild(div);
24     return div;
25 }
26 var selfControll=new selfControll();
27 map.addControl(selfControll);

  1,定義一個自定義的構造函數。2，設置自定義控制項構造函數的prototype屬性為Control的實例，以便繼承控制項基類。3,實現initialize()方法.4,實例一個自定義控制項，向地圖中添加。 

 添加覆蓋物

覆蓋物:所有疊加或覆蓋到地圖的內容，統稱地圖覆蓋物。

地圖集中覆蓋物:

Overlay：覆蓋物的抽象基類，所有的覆蓋物均繼承此類的方法。

Marker：標註表示地圖上的點，可自定義標註的圖標。

Label：表示地圖上的文本標註，您可以自定義標註的文本內容。

Polyline：表示地圖上的折線。

Polygon：表示地圖上的多邊形。多邊形類似於閉合的折線，另外您也可以為其添加填充顏色。

Circle: 表示地圖上的圓。

InfoWindow：信息視窗也是一種特殊的覆蓋物，它可以展示更為豐富的文字和多媒體信息。註意：同一時刻只能有一個信息視窗在地圖上打開。

添加標註

 var marker=new BMap.Marker(point);
 map.addOverlay(marker);

   紅色的就是預設的標註.

添加折線

//添加折線
 var polyline = new BMap.Polyline([    
   new BMap.Point(116.399, 39.910),    
   new BMap.Point(116.405, 39.920)    
 ],    
 {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5}    
 );    
 map.addOverlay(polyline);

Polyline表示地圖上的折線覆蓋物。它包含一組點，並將這些點連接起來形成折線。

 添加信息類

var opts1={
              width:250,
              height:100,
              title:'hello'
            }
       var infoWindow=new BMap.InfoWindow('world',opts1);
       map.openInfoWindow(infoWindow,map.getCenter());

使用infoWindow來創建一個信息窗實例，一個地圖上只能有一個信息窗處於打開狀態

 

 

事件監聽

百度地圖API中大部分對象都含有addEventListener,可以通過該方法來監聽對象的事件

點點擊地圖時觸發事件:

var map = new BMap.Map("container");    
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);    
map.addEventListener("click", function(){    
 alert("您點擊了地圖。");    
});

當拖動地圖後事件:

var map = new BMap.Map("container");    
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);    
map.addEventListener("dragend", function(){    
 var center = map.getCenter();    
 alert("地圖中心點變更為：" + center.lng + ", " + center.lat);    
})

當地圖縮放後事件,

var map = new BMap.Map("container");    
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);    
map.addEventListener("zoomend", function(){    
 alert("地圖縮放至：" + this.getZoom() + "級");    
});

 移除事件

每一個API對象都提供了removeEventListener用來移除事件監聽函數

var map = new BMap.Map("container");    
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);    
function showInfo(e){    
 alert(e.point.lng + ", " + e.point.lat);    
 map.removeEventListener("click", showInfo);    
}    
map.addEventListener("click", showInfo);

用戶第一次點擊地圖會觸發事件監聽函數，在函數內部對事件監聽進行了移除，因此後續的點擊操作則不會觸發監聽函數。

 

 服務配置

 //BMap.LocalSearch提供了若幹配置方法，通過它們可以自定義搜索服務的行為以滿足您的需求。
    var local=new BMap.LocalSearch('北京市',{
       renderOptions: {map: map,autoViewport: true},pageCapacity: 9
    }); 
    
    //結果面板 通過設置BMap.LocalSearchOptions.renderOptions.panel屬性，可以為本地搜索對象提供一個結果列表容器，搜索結果會自動添加到容器元素中
    /*var local=new BMap.LocalSearch(map,{
        renderOptions:{map:map,panel:'results'}
    });
    local.search("中關村");*/
    
    //數據介面、
    //BMap.LocalSearch和BMap.LocalSearchOpions類提供了若幹設置回調函數的介面，通過它們可以得到搜索結果的數據信息.onSearchComplete包含了每一次搜索結果的數據信息BMap.LocalSearch.getStatus()方法判斷搜素是否成功或者得到錯誤信息
    options={
        onSearchComplete:function(results){
            if(local.getStatus()==BMAP_STATUS_SUCCESS){
                var s=[];
                for (var i = 0; i <results.getCurrentNumPois(); i++) {
                    s.push(results.getPoi(i).title+","+results.getPoi(i).address);
                }
                console.log(s);
            }
        }
    }
     var local=new BMap.LocalSearch(map,options,{
       renderOptions: {map: map,autoViewport: true},pageCapacity: 9
    }); 
    //var local=new BMap.LocalSearch('北京市');
     local.search('中華共和國公安部');
     local.searchNearby('小吃','前門');


     //地理編碼
     var myGeo= new BMap.Geocoder();//創建地址解析協議
    /* myGeo.getPoint('北京市海澱區上地10街10號',function(point){
         if(point){
             map.centerAndZoom(point,16);//調整地圖視野
             map.addOverlay(new BMap.Marker(point));//添加標註到map上
         }
     },'北京市');*/

     //反向地理編碼
     //反向地理編碼的過程正好相反，它根據一個坐標點得到一個地址的描述
     myGeo.getLocation(new BMap.Point(120.305456, 31.570037),function(result){
         if(result){
             alert(result.address);
         }
     });

 

全景控制項

         //點擊全景控制項會進入全景圖，點擊全景圖右上角的關閉按鈕會退回到普通地圖。 
        //通過全景控制項可以從普通地圖進入全景地圖，添加全景控制項的方式同添加工具條等控制項類似 
          var stCtrl=new BMap.PanoramaControl();
          stCtrl.setOffset(new BMap.Size(20,20));
          map.addControl(stCtrl);
        
        //設置導航控制項
          var panorama=new BMap.Panorama('panorama',{navigationControl:false,linksControl:false});
          Panorama.setOptions({navigationControl:false,linksControl:false});

        //設置道路指引控制項
        //通過PanoramaOption指定
          var panorama = new BMap.Panorama('panorama', {linksControl:false}); //預設為顯示道路指引控制項，預設值為true
        //通過setOptions方法指定
          Panorama.setOptions({linksControl:false});

 

 


 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 自增 加減運算
    1 package test; 2 //i++ 先取值後運算 int i=4; int j=i++; i=5;j=4; 3 //++i 先運算後取值 int i=4;int j=++i; i=5;j=5; 4 public class Test6 { 5 public static void mai ...
  • 編寫高質量代碼:改善Java程式的151個建議(第5章:數組和集合___建議79~82)
    建議79：集合中的哈希碼不要重覆 在一個列表中查找某值是非常耗費資源的，隨機存取的列表是遍歷查找，順序存儲的列表是鏈表查找，或者是Collections的二分法查找，但這都不夠快，畢竟都是遍歷嘛，最快的還要數以Hash開頭的集合(如HashMap、HashSet等類)查找，我們以HashMap為例， ...
  • 原型模型
    1、原型結構圖 代碼 3、談談淺複製和深複製 淺複製：被覆制對象的所有變數都含有與原來的對象相同的值，而所有的對其他對象的引用都仍指向原來的對象 深複製：把原來引用對象的變數指向複製過來的新對象，而不是原來被原有的被引用的對象 深拷貝和淺拷貝，會發生深拷貝的是java 的 8種基本數據類型和他們的封 ...
  • 設計模式之設計原則
    很多書上對設計模式的講解很詳細，可過一段時間就忘記了，這是我對設計模式的理解，便於記憶 單一設計原則：形象的比喻為照相機與手機，手機雖然功能多，但照相效果比不上功能單一的照相機 開-閉原則：軟體實體（類，模塊等）應該擴展，但不可修改 依賴倒置原則：抽象不應該依賴於細節，細節應該依賴於抽象，高層模塊不 ...
  • 淺談簡單工廠模式和策略模式
    1、簡單工廠模式如圖 代碼： 缺點：簡單工廠模式需要客戶端認識兩個類，Cash和CashFactory 優點：子類的實例化被工廠封裝了起來，客戶端看不到 2、策略模式如圖 代碼： 缺點：客戶端（測試端）完全暴露了實現的子類 優點：策略模式的優點是簡化了單元測試，因為每一個演算法都有自己的類，可以通過自 ...
  • JavaScript學習總結 Ajax和Http狀態字
    Ajax及其工作原理 AJAX 是一種與伺服器交換數據無需刷新網頁的技術，最早由Google公司在谷歌地圖裡使用，並迅速風靡。 AJAX是不能跨域的，如需跨域，可以使用document.domain='a.com'；或者使用伺服器代理，代理XMLHttpRequest文件 AJAX是基於現有的Int ...
  • apply方法別有他用！
    首先是apply（）一個很強大的功能——能將一個數組預設轉化為參數列表！！！ 應用： 1.求出一個數組中的最大值 Math.max()方法接受多個參數，但是不接受數組，所以直接Math.max(arr)是無法達到效果的，由apply()將數組轉化成參數列表進行操作。 2.合併數組 ①使用concat ...
  • Angular2 Hello World 之 2.0
    最近angular2正式版發佈了，現在就趁熱接著記錄一下2.0版的Hello World。據說由RC6升級到2.0代碼改動不是很大，在寫的時候也感覺改動不是很大，這次記錄還是以asp.net core 空項目模板為基礎，本著在此基礎上添加最少的代碼來實現Hello World，沒用的代碼全部清掉（用 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類