用python将百度地图API集成到网页中去

我们很多时候需要在网页中插入地图元素，比如.外卖餐厅的地址、楼盘位置等等，这个时候我们可以直接调用百度地图API的接口，将其显示出来。当然，对于指定的位置信息，都可以调用这个接口进行展示。

首先给出百度地图API的源码:http://developer.baidu.com/map/jsdemo.htm#a1_2

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代码复制过来即可。

创建完成后，将其发布到服务器上即可。

点击该网站：http://www.geerniya.cn/map/ 即可看到发布的地图网站。如下所示：

这里写图片描述
当然，这里只是简单的调用百度地图接口，我们可以在其基础上对其进行更丰富的操作，这就看各自的需求了。