天天看點
傳回

使用百度地圖接口實作自定義網頁地圖開發實作

上午研究了下一些網站都已經實作好的地區、公交、線路等等一些基于“地圖”的服務，這些服務都是基于諸如百度、谷歌地圖服務接口下的二次開發，百度地圖接口服務免費，而且開發文檔,API介紹詳細，是以本文暫先介紹如何調用百度地圖服務（API）

http://developer.baidu.com/service#dev       百度開發者中心，進去之後能夠看見baiduMap API的幫助文檔，文檔不錯，比較詳細，一般參閱此文檔基本上能應付一般的需求了，

程式設計步驟也較為簡單：

js代碼：

[javascript]  view plain copy

  1. <span style="font-size:18px;">var map;  
  2. function initMap(){  
  3.     map = new BMap.Map("mapBox"); // 建立地圖執行個體   
  4.     var point = new BMap.Point(116.404,39.915); // 建立點坐标   
  5.     map.centerAndZoom(point,15); // 初始化地圖，設定中心點坐标和地圖級别  
  6. }  
  7. function search(){  
  8.     var areaName = $("area").value;  
  9.     if(areaName=="")return;  
  10.     if(map==null){  
  11.         init();  
  12.     }  
  13.     var local = new BMap.LocalSearch(map,{     
  14.          renderOptions:{map:map}     
  15.     });     
  16.     local.search(areaName);     
  17. }  
  18. function $(id){  
  19.     return document.getElementById(id);  
  20. }</span>  

html代碼：

[html]  view plain copy

  1. <span style="font-size:16px;"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  5. <title>地圖搜尋</title>  
  6. <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>  
  7. <script type="text/javascript" src="js/map.js"></script>  
  8. </head>  
  9. <body onload="initMap();">  
  10.     <div id="operator">  
  11.         <form action="#">  
  12.             位置：<input type="text" name="area" id="area" style=""/>  
  13.             <br/>  
  14.             <input type="button" onclick="search();" id="searchBtn" value="搜尋此位置">  
  15.         </form>  
  16.     </div>  
  17.     <div id="mapBox" style="width:500px;height:500px;background-color:navy;position:absolute;left:240px;top:10px;"></div>  
  18. </body>  
  19. </html></span>  

解釋：

      1、頁面中引入百度js API

[html]  view plain copy

  1. <span style="font-size:18px;"><script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script></span>  

       2、要為地圖顯示指定容器，一般為div

[html]  view plain copy

  1. <span style="font-size:18px;"><div id="mapBox" style="width:500px;height:500px;background-color:navy;position:absolute;left:240px;top:10px;"></div></span>  

        3、在js代碼中建立地圖對象（指定容器）

[javascript]  view plain copy

  1. <span style="font-size:18px;">map = new BMap.Map("mapBox");   
  2. var point = new BMap.Point(116.404,39.915);   
  3. map.centerAndZoom(point,15); //初始化  
  4. </span>  

         4、其他功能，諸如搜尋地名，公交路線等等，請參考幫助文檔，還是比較詳細的

百度地圖 地圖 api 地圖API 地圖開發 地圖
上一篇: 華為 android 耗電量,【華為P8評測】100%耗電全程 華為P8續航表現實景測試（全文）_華為 P8_手機評測-中關村線上...
下一篇: 百度地圖android自定義文字,百度地圖之——自定義marker樣式

繼續閱讀