因為項目要用到百度地圖，所以先摸索了一下，各種功能官方都有文檔，點擊可查看，文章的話我就直接寫我用到的功能例子了，要用可以直接復制粘貼~
一、主要涉及到的幾個接口（先申請密鑰）：
1、技術一：坐標轉換API（轉換成百度地圖的經緯度）
官網地址：http://lbsyun.baidu.com/index.php?title=webapi/guide/changeposition 可以查看API用法及各參數含義
API服務地址：http://api.map.baidu.com/geoconv/v1/? //GET請求
使用示例一：http://api.map.baidu.com/geoconv/v1/?coords=轉換前的經度,轉換前的緯度&from=1&to=5&ak=你的密鑰
2、技術二：正逆地址解析（結構化地址 與 經緯度 的解析）
（1）地址解析（結構化地址 解析得到 經緯度）
官網地址：http://lbsyun.baidu.com/index.php?title=webapi/guide/webservice-geocoding 可以查看API用法及各參數含義
API服務地址：http://api.map.baidu.com/geocoder/v2/? //GET請求
使用示例一：http://api.map.baidu.com/geocoder/v2/address=結構化的地址&output=json&ak=你的密鑰
（2）逆地址解析（經緯度 解析得到 結構化地址）
官網地址：http://lbsyun.baidu.com/index.php?title=webapi/guide/webservice-geocoding-abroad 可以查看API用法及各參數含義
API服務地址：http://api.map.baidu.com/geocoder/v2/? //GET請求
使用示例一：http://api.map.baidu.com/geocoder/v2/?location=緯度,經度&output=xml&pois=1&ak=你的ak [ ！注意：location=緯度,經度 ，不要寫反了 ]
二、完整例子：
1、百度地圖——在地圖中展示當前位置
總體思路：通過 H5 獲取當前地理位置得到經緯度；將這個經緯度轉換成百度地圖的經緯度（如果不轉換，誤差有點大）；在地圖中標記該百度地圖經緯度對應的點（即當前位置）。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>顯示當前位置—優化</title>
<style type="text/css"> body, html{width: 100%;height: 100%;margin:0;font-family:"微軟雅黑";} #allmap{height:400px;width:100%;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密鑰"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>
</head>
<body>
<div id="allmap"></div>
<script type="text/javascript">
//地圖初始化
var bm = new BMap.Map("allmap"); bm.centerAndZoom(new BMap.Point(121.48054,31.235929), 12); bm.enableScrollWheelZoom(true); bm.addControl(new BMap.NavigationControl()); // H5 獲取當前位置經緯度
var location_lon = '',location_lat = '',myPoint; // 經度,緯度
if (navigator.geolocation){ navigator.geolocation.getCurrentPosition(function (position) { location_lon = position.coords.longitude; location_lat = position.coords.latitude; // alert('h5經度：'+location_lon);alert('h5緯度：'+location_lat);
myPoint = new BMap.Point(location_lon,location_lat); bm.centerAndZoom(myPoint, 15); // 改變地圖中心點
//添加 H5坐標 marker和label
var markergg = new BMap.Marker(myPoint); bm.addOverlay(markergg); //添加GPS marker
var labelgg = new BMap.Label("未轉換的H5坐標（誤差大）",{offset:new BMap.Size(20,-10)}); markergg.setLabel(labelgg); //添加GPS label
setTimeout(function(){ var convertor = new BMap.Convertor(); var pointArr = []; pointArr.push(myPoint); convertor.translate(pointArr, 1, 5, translateCallback); }, 1000); //坐標轉換完之后的回調函數
translateCallback = function (data){ if(data.status === 0) { var marker = new BMap.Marker(data.points[0]); bm.addOverlay(marker); var label = new BMap.Label("轉換后的百度坐標（誤差小）",{offset:new BMap.Size(20,-10)}); marker.setLabel(label); //添加百度label
bm.setCenter(data.points[0]); } }; }); }else { alert("您的設備不支持定位功能"); } </script>
</body>
</html>
效果圖（如果拒絕共享位置信息就無法繼續）：
2、百度地圖——輸入兩個地址顯示中間的軌跡
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css"> body, html {width: 100%;height: 100%; margin:0;font-family:"微軟雅黑";} #allmap{height:400px;width:100%;} #r-result,#r-result table{width:100%;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密鑰"></script>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<title>兩點軌跡</title>
</head>
<body>
<div id="allmap"></div>
<div id="driving_way"> 起點: <input id="point_start" type="text" style="width:200px; margin-right:10px;" /><br><br> 終點: <input id="pint_end" type="text" style="width:200px; margin-right:10px;" /><br><br>
<input type="button" id="result" value="查詢路線"/>
</div>
<div id="r-result"></div>
</body>
</html>
<script type="text/javascript">
// 百度地圖API功能
var map = new BMap.Map("allmap"); map.centerAndZoom(new BMap.Point(121.48054,31.235929),12); // 當前地圖的中心點經緯度（上海）
map.enableScrollWheelZoom(true); $("#result").click(function(){ var start = $("#point_start").val(); var end = $("#pint_end").val(); map.clearOverlays(); var i=$("#driving_way select").val(); if(start != '' && end != ''){ searchPointWay(start,end); }else{ alert('起終點地址都不能為空！'); } function searchPointWay(start,end){ var driving = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true}}); driving.search(start,end); } }); </script>
效果圖：
三、百度地圖API的跨域問題
在本地直接用 AJAX 調用百度地圖API，存在跨域問題，后來用 nginx 做一個反向代理轉發請求，修改了請求配置文件就好了。
然后有個很奇怪的地方，項目啟動也用 nginx ，只統一配置域名就好了，可是百度地圖API要寫到參數那里才行，
location /BMap-getPoint {
proxy_pass http://api.map.baidu.com/geocoder/v2;
}
如果寫成這樣就不行：proxy_pass http://api.map.baidu.com; 不知道為啥。
因為是Angular 項目，所以我的請求用的是 Angular 項目里面封裝好的 http 請求：
/*百度地圖—地址解析*/
var getPoint = function () { var param = '北京市海淀區上地十街100號'; $http.get("/BMap-getPoint/"+"?address="+param+"&output=json&ak=密鑰").success(function(response){ if(response.status == 0){ $('#location_lon').val(response.result.location.lng); $('#location_lat').val(response.result.location.lat); }else { alert('1狀態碼:'+response.status); } }).error(function(XMLHttpRequest, textStatus, errorThrown){ alert("getPosition Error"); }); };
<p>1、北京市海淀區上地十街100號</p> 經度1: <input id="location_lon" type="text" style="width:200px; margin-right:10px;" /><br><br> 緯度1: <input id="location_lat" type="text" style="width:200px; margin-right:10px;" /><br><br>
顯示正確：