百度地圖API新手入門

時間 2019-11-10

標籤百度地圖 api 新手入門简体版

原文原文鏈接

最近，共享單車着實火了一把，市場競爭也是異常的激烈，百花爭豔，百家爭鳴，羣雄逐鹿，最後鹿死誰手，如今還不得而知，不過能夠確定的是細節決定成敗，更重要的還在於用戶的體驗。javascript

用過的同窗們都會知道，打開共享單車APP軟件，便可看到以地圖的形式展現車輛的分佈狀況以及離本身最近的車輛，這樣就能夠很方便很快速的找到車了，那麼，這樣的技術是如何實現的呢？以前也發過兩篇關於百度地圖API的文章，有網友評論說效果很好，我也說要持續更新的，結果呢，工做太忙，就把這事擱下了，今天呢，咱們仍是一塊兒來重溫一下百度地圖的初階教程吧。php

（1）進入百度地圖開放平臺：http://lbsyun.baidu.com/index.php （別忘了先登陸哦）css

（2）點擊「開發」，選擇「JavaScript API」html

（3）若是以前已經申請過百度地圖開發者而且已經認證過，那麼應該已經有了密鑰了，直接查看應用就能夠看到了，若是以前沒有過上述操做，那麼咱們要先申請密鑰，即「獲取密鑰」java

（4）有了密鑰，咱們就能夠開始藉助百度地圖開放平臺開發咱們本身的地圖了。下面咱們來初始化一個地圖：api

 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=您的密鑰">
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.404, 39.915);  // 建立點座標  
23 map.centerAndZoom(point, 15);                 // 初始化地圖，設置中心點座標和地圖級別  
24 </script>  
25 </body>  
26 </html>

其中，最關鍵的在於咱們要引入相應的百度地圖API文件，也就是瀏覽器

1 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密鑰">

這樣咱們才能使用API給咱們提供的BMap命名空間，全部類均在該命名空間之下，好比：BMap.Map,BMap.Control,BMap.Overlay。微信

好了，保存一下，在瀏覽器中運行。ui

　　效果如上圖所示，咱們還能夠在進行一下特效上的處理：spa

　　（5）咱們可使用panTo方法在2秒鐘以後使地圖平滑到新的中心點，若是移動距離超過了當前地圖大小，則會直接跳到該點。

var map = new BMap.Map("container");    
var point = new BMap.Point(116.404, 39.915);    
map.centerAndZoom(point, 15);    
window.setTimeout(function(){  
    map.panTo(new BMap.Point(116.409, 39.918));    
}, 2000);

　　以上就是百度地圖API的初階部分，主要是申請一個密鑰，而後引用百度地圖API提供給咱們的命名空間，初始化一個地圖出來，並進行平移操做。後續咱們會更深一步的探索百度地圖的更多好玩有趣的東西。

並且，從今天開始，鄙人的微信公衆號開始同步更新相關技術知識，掃描下方二維碼，歡迎你們關注。
　　

相關標籤/搜索

每日一句

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