碼上歡樂
相關內容    簡體    繁體

!!代碼：baidu地圖

本文轉載自   查看原文   2014-08-08 13:10   3961    專題頁/ js

 

http://map.baidu.com/mobile/ 　　手機開發時，嵌入地圖可以嵌入這個網址!!

 

http://developer.baidu.com/map/lbs-cloud.htm　　　　百度地圖開發中心　　　　http://api.map.baidu.com/lbsapi/creatmap/ 　　百度地圖生成器　　2015-11-20

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

注意：正式應用不要用我的ak（臨時測試的可以用），自己去申請去： http://lbsyun.baidu.com/apiconsole/key

 

http://lbsyun.baidu.com/apiconsole/quota 　　查看每日配額

http://lbsyun.baidu.com/apiconsole/key 　　設置ak

 

http://developer.baidu.com/map/jshome.htm　　　　javascript API 大眾版（PC）

http://developer.baidu.com/map/jsdemo.htm　　　　javascript API 大眾版（PC）——DEMO

 

http://developer.baidu.com/map/jsmobile.htm　　　　javascript API 極速版（手機）

http://developer.baidu.com/map/jsdemo-mobile.htm　　javascript API 極速版（手機）——DEMO

 

http://developer.baidu.com/map/module-mobile.htm　　web 組件API（手機）——DEMO

http://api.map.baidu.com/lbsapi/getpoint/index.html　　坐標拾取　　2016-1-18

http://developer.baidu.com/map/reference/index.php　　JavaScript API>類參考　　2016-1-19

http://lbsyun.baidu.com/cms/jsapi/class/jsapi_reference.html　　JSAPI類參考　　2017-9-22

http://developer.baidu.com/map/jsdemo.htm　　JS DEMO示例　　2017-9-22

 

百度地圖的Hello, World

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=DuEpzTxLS2kjy7T7KAxhFwOl"></script>
<title>百度地圖的Hello, World</title>
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}
</style>
</head>
<body>
<div id="allmap"></div>
</body>
</html>

<script type="text/javascript">
//默認坐標經緯度:鳥巢
XX=116.403;
YY=40;

var map = new BMap.Map("allmap");            // 創建Map實例
var point = new BMap.Point(XX,YY);            // 創建點坐標
map.centerAndZoom(point,15);                // 初始化地圖,設置中心點坐標和地圖級別。
map.enableScrollWheelZoom();                //啟用滾輪放大縮小


var marker1 = new BMap.Marker(new BMap.Point(XX,YY));//標注
map.addOverlay(marker1);


var traffic = new BMap.TrafficLayer();            // 路況圖
map.addTileLayer(traffic);

</script>

 

 

根據地球半徑，測算兩點間距

http://tieba.baidu.com/p/2004450642　　參考這帖子

<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body,html,#allmap{width:100%;height:100%;overflow:hidden;margin:0;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=2uZgkxkTV4BCdGfAWN6m3cra"></script>
<title>根據地球半徑，測兩點間距</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">

// 百度地圖API功能
var map = new BMap.Map("allmap");
var point = new BMap.Point(XX1, YY1);
map.centerAndZoom(point, 13);
function showInfo(e){
    alert(e.point.lng + ", " + e.point.lat);
}
map.addEventListener("click", showInfo);


var XX1=116.300;
var YY1=40;
var marker1 = new BMap.Marker(new BMap.Point(XX1,YY1));  // 創建標注
map.addOverlay(marker1);              // 將標注添加到地圖中

var XX2=116.500;
var YY2=40;
var marker2 = new BMap.Marker(new BMap.Point(XX2,YY2));  // 創建標注
map.addOverlay(marker2);              // 將標注添加到地圖中


function test(lng1,lat1,lng2,lat2){
    var R=6370996.81;
    //var s=R*arccos(cos(lat1*pi()/180 ) * cos(lat2*pi()/180) * cos(lng1*pi()/180 -lng2*pi()/180) + sin(lat1*pi()/180 ) * sin(lat2*pi()/180));
    var s=R*Math.acos(Math.cos(lat1*Math.PI/180 ) * Math.cos(lat2*Math.PI/180) * Math.cos(lng1*Math.PI/180 -lng2*Math.PI/180) + Math.sin(lat1*Math.PI/180 ) * Math.sin(lat2*Math.PI/180));
    alert(s);
}//其中，R=6370996.81;//地球半徑，pi()為圓周率π，(lng1,lat1),(lng2,lat2)分別是百度地圖的兩個經緯度，帶入數值計算即可


//test(lng1,lat1,lng2,lat2)
test(XX1,YY1,XX2,YY2);

</script>

 

 GPS坐標，轉為baidu坐標（調用接口）

http://developer.baidu.com/map/index.php?title=webapi/guide/changeposition

<!-- jquery庫 -->
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=2uZgkxkTV4BCdGfAWN6m3cra"></script>
<div id="allmap"></div>

<script type="text/javascript">
$(function(){
    var BAIDU_MAP_2014 = {

        TRANS:function(x,y) {//初始化，獲取當前位置的經緯度
            var requestUrl="http://api.map.baidu.com/geoconv/v1/?coords="+x+","+y+"&from=1&to=5&ak=2uZgkxkTV4BCdGfAWN6m3cra&callback=?";
            $.ajax({
                type : "get",
                async:true,
                url : requestUrl,
                data : "output=json",
                dataType : "jsonp",
                success :function(data){
                    console.log("--------(xxxxx)-----success");
                    console.log(data.result[0].x);
                    console.log(data.result[0].y);
                },
                error:function(data){
                    console.log("error: (xxxxx)");
                }
            });

        },
    };


var XX=116.3;
var YY=40;
//ANDROID!!
//XX=getLongitude();//獲取經度
//YY=getLatitude();//獲取維度

BAIDU_MAP_2014.TRANS(XX,YY);
$("#allmap").html(XX+"<br>"+YY);

});
</script>

 

 

 

 

 

 

 

 

 

 

http://developer.baidu.com/map/wiki/index.php?title=uri/api/web　　　　URI API

例子：http://api.map.baidu.com/marker?location=39.916979519873,116.41004950566&title=我的位置&content=百度奎科大廈&output=html

http://api.map.baidu.com/place/search?query=酒店&location=31.204055632862,121.41117785465&radius=1000&region=上海&output=html&src=yourCompanyName|yourAppName //周邊檢索

http://api.map.baidu.com/place/search?query=酒店&location=40,116.48&radius=1000&region=&output=html&src=yourCompanyName|yourAppName //周邊檢索

http://api.map.baidu.com/place/search?query=酒店&location=40,116.48&radius=1000&region=&output=json&src=yourCompanyName|yourAppName //周邊檢索（返回json）

注意：
location 這個經緯度坐標，是先緯度、再經度。
output 參數，可以是html，也可以是json！！！ ——很棒啊！
region 可以不填

 

 

 

http://api.map.baidu.com/place/search?query=酒店&location=40,116.48&radius=1000&region=&output=html&src=yourCompanyName|yourAppName

此網址用手機瀏覽器請求后，指向的頁面網址是：（經緯度的值略有差異，請無視）

http://map.baidu.com/mobile/webapp/place/list/qt=s&wd=%E9%85%92%E5%BA%97&c=131&nb_x=12966635.902421&nb_y=4838219.182580&center_rank=1/center_name=%E5%8C%97%E4%BA%AC%E5%B8%82%E6%9C%9D%E9%98%B3%E5%8C%BA%E9%98%9C%E8%8D%A3%E8%A1%9710%E5%8F%B7/?third_party=uri_api

解碼后，是如下字串：

http://map.baidu.com/mobile/webapp/place/list/qt=s&wd=酒店&c=131&nb_x=12966635.902421&nb_y=4838219.182580¢er_rank=1/center_name=北京市朝陽區阜榮街10號/?third_party=uri_ap

 

 

 

 

   

 

http://www.cnblogs.com/xsyblogs/p/3936275.html 　　你可能用到的百度地圖效果（附源碼）　　2014-8-28

 

 

 

 

老版本（v1.4）的百度地圖：2015-11-20

 

<div class="jc_pic6" style="width:463px;height:368px;" id="dituContent"></div>
<script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.4&services=true"></script>
<script type="text/javascript">
function showmap(XX,YY){
    var map = new BMap.Map("dituContent"); // 創建Map實例
    var point = new BMap.Point(XX, YY); // 創建點坐標
    map.centerAndZoom(point, 15); // 初始化地圖,設置中心點坐標和地圖級別。
    map.enableScrollWheelZoom(); //啟用滾輪放大縮小
    var option3 = {
        type: BMAP_NAVIGATION_CONTROL_ZOOM
    };
    map.addControl(new BMap.NavigationControl(option3)); //左上角地圖縮放
    var marker1 = new BMap.Marker(new BMap.Point(XX, YY)); //標注
    map.addOverlay(marker1);
}

var XX = 116.426548;
var YY = 39.96365;
showmap(XX,YY,'dituContentRight');
</script>

 

..


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 使用vue-baidu-map開發地圖找房的總結 調用baidu地圖API，實現語音導航播報 VUE+百度地圖 vue-baidu-map 關於Baidu Map(百度地圖SDK)的各種騷b問題！ baidu 地圖 鼠標移上顯示標簽 鼠標離開隱藏標簽 Baidu - Echarts 地圖實例測試，並繪制平滑圓弧路徑 vue結合百度地圖（vue-baidu-map）繪制多邊形 angular-baidu-maps — 百度地圖AngularJs指令示例 vue 結合百度地圖（vue-baidu-map）點聚合，並點擊開啟信息窗口 VUE 中引入百度地圖(vue-Baidu-Map)
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM