基于百度地图画出物流起始线路

相信很多小伙伴在做商城项目物流模块时会用到需要在地图上显示物流信息的功能，那么我们如何基于百度地图来展示客户的物流信息的功能呢？下面我们来实现一下。
首先需要调用一个百度地图的api接口并且需要一个key（这个可以在百度上找），下面这个是我在百度上找的

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=4IU3oIAMpZhfWZsMu7xzqBBAf6vMHcoa"> script>

       <div class="modal fade" id="modal-Operating" style="width:1560px;margin-left:-780px;">
        <div class="modal-dialog">
            

                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×span>
                    button>
                div>
                <div class="modal-body" id="allmap">
                div>
        div>
    div>

var map;
var XF;
var XS;
var XY=0;
$(function(){
	    //初始化模板选择的下拉框
		var sel = document.getElementById('stylelist');
		for(var key in mapstyles){
			var style = mapstyles[key];
			var item = new  Option(style.title,key);
			sel.options.add(item);
		}
	    map = new BMap.Map("allmap");
		var point = new BMap.Point(116.404, 39.915);
	
		map.addControl(new BMap.NavigationControl());               // 添加平移缩放控件
		map.addControl(new BMap.ScaleControl());                    // 添加比例尺控件
		map.addControl(new BMap.OverviewMapControl());              //添加缩略地图控件
		map.enableScrollWheelZoom();                            //启用滚轮放大缩小
		map.addControl(new BMap.MapTypeControl());          //添加地图类型控件
		map.centerAndZoom(point, 14); 
		changeMapStyle('normal')
		sel.value = 'normal';
		function changeMapStyle(style){
			map.setMapStyle({style:style});
			$('#desc').html(mapstyles[style].desc);
		}
    })
    //发货地址定位
	function setPlace(value) {
	    var local, point, marker = null;
	    local = new BMap.LocalSearch(map, { //智能搜索
	        onSearchComplete: fn
	    });
	    local.search(value);
	function fn() {
        //如果搜索的有结果
        if(local.getResults() != undefined) {
            map.clearOverlays(); //清除地图上所有覆盖物
            if(local.getResults().getPoi(0)) {
                point = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
                map.centerAndZoom(point, 18);
                marker = new BMap.Marker(point); // 创建标注
                map.addOverlay(marker); // 将标注添加到地图中
                marker.enableDragging(); // 可拖拽
                if(XY==0){
                  XF=point;
                }
                else{
                  XS=point;
                }
                XY=1;
            } else {
                alert("未匹配到地点!可拖动地图上的红色图标到精确位置");
            }
        } else {
            alert("未找到搜索结果");
        }
      }
}

效果截图：

这样你就可以实现基于百度地图画线物流起始线路的功能了，是不是很简单呢。