用python將百度地圖API整合到網頁中去
阿新 • • 發佈:2019-02-17
我們很多時候需要在網頁中插入地圖元素,比如.外賣餐廳的地址、樓盤位置等等,這個時候我們可以直接呼叫百度地圖API的介面,將其顯示出來。當然,對於指定的位置資訊,都可以呼叫這個介面進行展示。
1、建立個人祕鑰
在進行開發之前,首先需要取得百度地圖開放平臺的 訪問應用(AK)祕鑰,如下圖所示:
通過註冊百度賬號,申請開發者賬號,然後建立應用即可獲得相應祕鑰。
2、選取相應的介面
我們以小車行駛路線為例進行講解。
通過呼叫該部分的介面原始碼,如下所示:
<html lang="en">
<head>
<meta charset="utf-8" />
<title>路書</title>
<style type="text/css">
body, html{width: 100%;height: 100%;margin:0;font-family:"微軟雅黑";}
#map_canvas{width:100%;height:500px;}
#result {width:100%}
</style>
<script src="http://api.map.baidu.com/api?v=2.0&ak=您的金鑰"></script >
<script type="text/javascript" src="http://api.map.baidu.com/library/LuShu/1.2/src/LuShu_min.js"></script>
</head>
<body>
<div id="map_canvas"></div>
<div id="result"></div>
<button id="run">開始</button>
<button id="stop"> 停止</button>
<button id="pause">暫停</button>
<button id="hide">隱藏資訊視窗</button>
<button id="show">展示資訊視窗</button>
<script>
var map = new BMap.Map('map_canvas');
map.enableScrollWheelZoom();
map.centerAndZoom(new BMap.Point(116.404, 39.915), 13);
var lushu;
// 例項化一個駕車導航用來生成路線
var drv = new BMap.DrivingRoute('北京', {
onSearchComplete: function(res) {
if (drv.getStatus() == BMAP_STATUS_SUCCESS) {
var plan = res.getPlan(0);
var arrPois =[];
for(var j=0;j<plan.getNumRoutes();j++){
var route = plan.getRoute(j);
arrPois= arrPois.concat(route.getPath());
}
map.addOverlay(new BMap.Polyline(arrPois, {strokeColor: '#111'}));
map.setViewport(arrPois);
lushu = new BMapLib.LuShu(map,arrPois,{
defaultContent:"",//"從天安門到百度大廈"
autoView:true,//是否開啟自動視野調整,如果開啟那麼路書在運動過程中會根據視野自動調整
icon : new BMap.Icon('http://lbsyun.baidu.com/jsdemo/img/car.png', new BMap.Size(52,26),{anchor : new BMap.Size(27, 13)}),
speed: 4500,
enableRotation:true,//是否設定marker隨著道路的走向進行旋轉
landmarkPois: [
{lng:116.314782,lat:39.913508,html:'加油站',pauseTime:2},
{lng:116.315391,lat:39.964429,html:'高速公路收費<div><img src="http://map.baidu.com/img/logo-map.gif"/></div>',pauseTime:3},
{lng:116.381476,lat:39.974073,html:'肯德基早餐<div><img src="http://ishouji.baidu.com/resource/images/map/show_pic04.gif"/></div>',pauseTime:2}
]});
}
}
});
drv.search('天安門', '百度大廈');
//繫結事件
$("run").onclick = function(){
lushu.start();
}
$("stop").onclick = function(){
lushu.stop();
}
$("pause").onclick = function(){
lushu.pause();
}
$("hide").onclick = function(){
lushu.hideInfoWindow();
}
$("show").onclick = function(){
lushu.showInfoWindow();
}
function $(element){
return document.getElementById(element);
}
</script>
</body>
</html>
我們可以建立相關網頁,或者將該部分的程式碼整合到自己的網頁中去。這裡我以自己的網站:www.geerniya.cn/map為例來說明。
3 、通過django建立相關網頁
通過路由——檢視函式——模板,可以將該網頁對映到瀏覽器中。我們通過django建立該地圖網頁。
urls.py
urlpatterns = [
...
url(r'^map/', MapView.as_view(), name='map'),
]
views.py
class MapView(View):
"""
呼叫百度地圖API
"""
def get(self, request):
return render(request, 'map.html')
templates
在該目錄下建立map.html,並將之前的html程式碼複製過來即可。
建立完成後,將其釋出到伺服器上即可。
當然,這裡只是簡單的呼叫百度地圖介面,我們可以在其基礎上對其進行更豐富的操作,這就看各自的需求了。