调用百度地图进行路线规划

最近在开发公众号，需要用到百度地图API来进行定位签到、路线规划、导航等功能，在此做一个总结，方便以后查阅

大致分为以下几个步骤

在这个网站里面：http://lbsyun.baidu.com/index.php?title=jspopular3.0/guide/getkey，点击对应的文字就可以完成对应的工作

完成上述的步骤后就可以用百度地图的相关功能了

开始前我们先用几行代码实现实现地图展示的功能，也算热热手

1：准备页面（根据HTML标准，每一份HTML文档都应该声明正确的文档类型，我们建议您使用最新的符合HTML5规范的文档声明）　　

<!DOCTYPE html>

2：适应移动端页面展示（下面我们添加一个meta标签，以便使您的页面更好的在移动平台上展示。）

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

3：设置容器样式（设置容器样式大小，使地图充满整个浏览器窗口）

<style type="text/css">  
    html{height:100%}    
    body{height:100%;margin:0px;padding:0px}    
    #container{height:100%}    
</style>

4：引用百度地图API文件（注意里面的ak，是在开始之前申请的ak，可以在控制台找到）

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

5:创建地图容器元素（地图需要一个HTML元素作为容器，这样才能展现到页面上。这里我们创建了一个div元素）

<div id="container"></div>

6：创建地图实例（位于BMap命名空间下的Map类表示地图，通过new操作符可以创建一个地图实例。其参数可以是元素id也可以是元素对象）

var map = new BMap.Map("container");

7：设置中心点坐标（这里我们使用BMap命名空间下的Point类来创建一个坐标点。Point类描述了一个地理坐标点，其中116.404表示经度，39.915表示纬度。（为*坐标））

var point = new BMap.Point(116.404, 39.915);

8：地图初始化，同时设置地图展示级别（在创建地图实例后，我们需要对其进行初始化，BMap.Map.centerAndZoom()方法要求设置中心点坐标和地图级别。地图必须经过初始化才可以执行其他操作。）

map.centerAndZoom(point, 15);

至此，我们就快速创建了一张以*为中心的地图~

定位

1：浏览器定位

var map = new BMap.Map("allmap");
var point = new BMap.Point(116.331398,39.897445);
map.centerAndZoom(point,12);

var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
    if(this.getStatus() == BMAP_STATUS_SUCCESS){
        var mk = new BMap.Marker(r.point);
        map.addOverlay(mk);
        map.panTo(r.point);
        alert(\'您的位置：\'+r.point.lng+\',\'+r.point.lat);
    }
    else {
        alert(\'failed\'+this.getStatus());
    }        
});

2：IP定位

var map = new BMap.Map("allmap");
var point = new BMap.Point(116.331398,39.897445);
map.centerAndZoom(point,12);

function myFun(result){
    var cityName = result.name;
    map.setCenter(cityName);
    alert("当前定位城市:"+cityName);
}
var myCity = new BMap.LocalCity();
myCity.get(myFun);

3：定位SDK辅助定位

var map = new BMap.Map("allmap");
var point = new BMap.Point(116.331398,39.897445);
map.centerAndZoom(point,12);

var geolocation = new BMap.Geolocation();
// 开启SDK辅助定位
geolocation.enableSDKLocation();
geolocation.getCurrentPosition(function(r){
    if(this.getStatus() == BMAP_STATUS_SUCCESS){
        var mk = new BMap.Marker(r.point);
        map.addOverlay(mk);
        map.panTo(r.point);
        alert(\'您的位置：\'+r.point.lng+\',\'+r.point.lat);
    }
    else {
        alert(\'failed\'+this.getStatus());
    }        
});

备注：在手机上调用定位时存在定位不准的问题，这是由于百度会根据附近的ip基站来进行定位，由于我开发的是公众号，可以使用微信的定位功能获取到经纬度，微信的定位时根据GPS定位，会返回当前所在地址的经纬度，获取到经纬度之后利用百度地图创建该点坐标即可，如下代码

var map = new BMap.Map("地图容器的id");
      map.centerAndZoom(new BMap.Point(116.331398, 39.897445), 18);
      map.enableScrollWheelZoom(true);
      // 用经纬度设置地图中心点     
        map.clearOverlays();
        var new_point = new BMap.Point( 新的经度 , 新的纬度 );
        var marker = new BMap.Marker(new_point); // 创建标注
        map.addOverlay(marker); // 将标注添加到地图中
        map.panTo(new_point);
        this.address = this.detailedAddress;

路线规划

百度提供如下几种导航

驾车	DrivingRoute	提供驾车路线规划服务
公交	TransitRoute	提供市内公交和跨城交通方式（飞机、火车、大巴）的路线规划服务
步行	WalkingRoute	提供步行路线规划服务
骑行	RidingRoute	提供骑行线路规划服务

在此我们以驾车为例

var map = new BMap.Map("container"); 
map.centerAndZoom(new BMap.Point(116.404, 39.915), 14); 
var driving = new BMap.DrivingRoute(map, { 
    renderOptions: { 
        map: map, 
        autoViewport: true 
} 
});
var start = new BMap.Point(116.310791, 40.003419);//起点坐标
var end = new BMap.Point(116.486419, 39.877282);//终点坐标
driving.search(start, end)

通常情况下，终点都是一段具体的地址，并不知道经纬度，所以在进行路线规划前还需要根据终点地址获取终点经纬度，这里用到百度的逆地理解析

// 创建地址解析器实例     
var myGeo = new BMap.Geocoder();      
// 将地址解析结果显示在地图上，并调整地图视野    
myGeo.getPoint("北京市海淀区上地10街10号", function(point){      
    if (point) {
　　　　　destinationlat = point.lat; //目的地纬度

　destinationlng = point.lng; //目的地经度