用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;jvar 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:'高速公路收费
',pauseTime:3},
{lng:116.381476,lat:39.974073,html:'肯德基早餐
',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/ 即可看到发布的地图网站。如下所示：
当然，这里只是简单的调用百度地图接口，我们可以在其基础上对其进行更丰富的操作，这就看各自的需求了。