一、官方文檔：
http://lbsyun.baidu.com/index.php?title=webapi/guide/changeposition
接口功能介紹
http://api.map.baidu.com/geoconv/v1/?coords=114.21892734521,29.575429778924&from=1&to=5&ak=你的密鑰 //GET請求
請求參數
| 參數名稱 | 含義 | 類型 | 舉例 | 默認值 | 是否必須 |
|---|---|---|---|---|---|
| coords | 需轉換的源坐標，多組坐標以“；”分隔 （經度，緯度） |
float | 114.21892734521,29.575429778924 | 無 | 是 |
| ak | 開發者密鑰,申請AK | string | 無 | 是 | |
| from | 源坐標類型：
|
int | 1 | 1 | 否 |
| to | 目標坐標類型： 5：bd09ll(百度經緯度坐標); 6：bd09mc(百度墨卡托平面坐標) |
int | 5 | 5 | 否 |
| sn | 若用戶所用AK的校驗方式為SN校驗時該參數必須 SN生成 | string | 無 | 否 | |
| output | 返回結果格式 | string | json | json | 否 |
返回結果參數
| 名稱 | 類型 | 說明 | |
|---|---|---|---|
| status | Int | 本次API訪問狀態，如果成功返回0，如果失敗返回其他數字 | |
| result | json或者xml數組 | 轉換結果 | |
| x | float | 經度 | |
| y | float | 緯度 | |
狀態碼說明
| 返回碼 | 英文描述 | 定義 | 常見原因 |
|---|---|---|---|
| 0 | ok | 正常 | 服務請求正常召回 |
| 1 | 內部錯誤 | ||
| 4 | 轉換失敗 | X→GPS時必現，根據法律規定，不支持將任何類型的坐標轉換為GPS坐標 | |
| 21 | from非法 | ||
| 22 | to非法 | ||
| 24 | coords格式非法 | ||
| 25 | coords個數非法，超過限制 | ||
| 26 | 參數錯誤 |
二、測試
購買ak，瀏覽器簡單測試
三、應用
//list 為經緯度對象數組
pointMap(list) {
if (list != undefined && list != null) {
var arr1=""
for (var i = 0; i < list.length; i++) {
var item = list[i];
if (i < list.length - 1) {
arr1 = arr1 + item.Longitude + "," + item.Latitude + ";";
} else {
arr1 = arr1 + item.Longitude + "," + item.Latitude ;
}
}
var url2 = "http://api.map.baidu.com/geoconv/v1/?coords=" + arr1 + "&from=1&to=5&ak=我的ak";
$.ajax({
url: url2,
//data: {},
type: "GET",
dataType: 'jsonp',
cache: false,
//timeout: 5000,
// jsonp 字段含義為服務器通過什么字段獲取回調函數的名稱
//jsonp: 'callback',//但，加上這兩列會導致數據缺失
// 聲明本地回調函數的名稱，jquery 默認隨機生成一個函數名稱
//jsonpCallback: 'jsonpCallback',//，但加上這兩列會導致數據缺失
success: function (data) {
console.log("result2 " + data)
console.log("result2.2 " + data.status)
for (var j = 0; j < data.result.length; j++) {
var item2 = data.result[j];
var p = [item2.x, item2.y, 1];
convertData.push(p)
}
}
}）；
}
輸出結果
效果對比：深圳仙湖植物園， 左邊經緯度，右邊百度坐標；
后來發現： 異步請求的數量不止一次，多個異步請求解決方案：
https://www.cnblogs.com/hao-1234-1234/p/13203222.html
四、echarts與百度地圖結合使用（部分代碼）
pointMapPart2(data, id, name) { ////console.log('pointMapPart2', data, id, name) var that = this; if (data != undefined && data != null && data.length > 0) { if (that[id]) { that[id].dispose() } else { that[id] = null; } // var element = document.getElementById(id); // 把 div v-if 改為v-show var element = that.$refs[id]; // console.log('element', element) var myChart = echarts.init(element); // animalMap_Echarts = myChart; var convertData = []; //for(var item of list) { // var p = [item.Longitude, item.Latitude, item.NumberLevel, item.Species]; // convertData.push(p) //} for (var j = 0; j < data.length; j++) { var item2 = data[j]; var p = [item2.x, item2.y, 1]; convertData.push(p) } // console.log('convertData', convertData) var myseriesName = name; var mytitle = myseriesName + "分布圖"; //animalMap_Echarts.off('click'); //animalMap_Echarts.on('click', function (params) { // ////console.log(params); // vm.showFormDetails(params); //}); var option = { title: { text: mytitle, left: 'center', top: 15, }, tooltip: { trigger: 'item', show: false, //formatter: function (dataTemp) { // // console.log('tooltip-formatter',dataTemp); // var formateStrings = []; // formateStrings.push(dataTemp.marker + "危害特征" + "：" + RiskGrade(dataTemp.value[2]).grade + "<br/>");//+ dataTemp.marker + "風險指數" + "：" + dataTemp.value[2]+ "<br/>" // return formateStrings; //} }, bmap: { center: [114.214336, 22.628779],//[114.214336, 22.548779],//[114.064336, 22.548779],//地圖中心點經緯度 zoom: 11, //地圖縮放程度 roam: true, mapStyle: { styleJson: [ { 'featureType': 'water', 'elementType': 'all', 'stylers': { 'color': '#d1d1d1' } }, { 'featureType': 'land', 'elementType': 'all', 'stylers': { 'color': '#f3f3f3' } }, { 'featureType': 'railway', 'elementType': 'all', 'stylers': { 'visibility': 'off' } }, { 'featureType': 'highway', 'elementType': 'all', 'stylers': { 'color': '#fdfdfd' } }, { 'featureType': 'highway', 'elementType': 'labels', 'stylers': { 'visibility': 'off' } }, { 'featureType': 'arterial', 'elementType': 'geometry', 'stylers': { 'color': '#fefefe' } }, { 'featureType': 'arterial', 'elementType': 'geometry.fill', 'stylers': { 'color': '#fefefe' } }, { 'featureType': 'poi', 'elementType': 'all', 'stylers': { 'visibility': 'off' } }, { 'featureType': 'green', 'elementType': 'all', 'stylers': { 'visibility': 'off' } }, { 'featureType': 'subway', 'elementType': 'all', 'stylers': { 'visibility': 'off' } }, { 'featureType': 'manmade', 'elementType': 'all', 'stylers': { 'color': '#d1d1d1' } }, { 'featureType': 'local', 'elementType': 'all', 'stylers': { 'color': '#d1d1d1' } }, { 'featureType': 'arterial', 'elementType': 'labels', 'stylers': { 'visibility': 'off' } }, { 'featureType': 'boundary', 'elementType': 'all', 'stylers': { 'color': '#fefefe' } }, { 'featureType': 'building', 'elementType': 'all', 'stylers': { 'color': '#d1d1d1' } }, { 'featureType': 'label', 'elementType': 'labels.text.fill', 'stylers': { 'color': '#d1d1d1'//'#D8BFD8'// '#999999' } } ] } }, series: [ { name: myseriesName, type: 'scatter', //散點圖 coordinateSystem: 'bmap', //坐標系 //data: [ // // 維度X 維度Y 其他維度 ... // [ 3.4, 4.5, 15, 43], // [ 4.2, 2.3, 20, 91], // [ 10.8, 9.5, 30, 18], // [ 7.2, 8.8, 18, 57] //] data: convertData, roam: true, symbolSize: function (val, params) { // console.log('symbolSize',val,params); return val[2] * 10; }, label: { normal: { formatter: function (params) { //console.log('label-formatter', params); return params.value[3]; }, position: 'right', show: false,//點旁邊不顯示文字 color: '#000000' }, emphasis: { show: false } }, itemStyle: { normal: { color: function (params) { ////console.log(params); return RiskGrade(params.value[2]).color;; }, } } }, ] }; myChart.setOption(option); //// 獲取百度地圖實例，使用百度地圖自帶的控件 var bmap = myChart.getModel().getComponent('bmap').getBMap(); bmap.addControl(new BMap.MapTypeControl({ mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP] }));//類型控件 ,BMAP_SATELLITE_MAP bmap.addControl(new BMap.NavigationControl()); // 縮放控件 bmap.addControl(new BMap.ScaleControl()); // 比例尺 //選中衛星地圖 bmap.setMapType(BMAP_HYBRID_MAP); that[id] = myChart; } else { myChart.clear(); } },