1. 程式人生 > >用python將百度地圖API整合到網頁中去

用python將百度地圖API整合到網頁中去

我們很多時候需要在網頁中插入地圖元素,比如.外賣餐廳的地址、樓盤位置等等,這個時候我們可以直接呼叫百度地圖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程式碼複製過來即可。

建立完成後,將其釋出到伺服器上即可。

這裡寫圖片描述
當然,這裡只是簡單的呼叫百度地圖介面,我們可以在其基礎上對其進行更豐富的操作,這就看各自的需求了。