基于百度地图api实现的起终点路线规划和自定义覆盖物启动APP

效果图

本人也是第一次做和百度地图相关的项目，这个效果有需要注意
1.起点和终点之间的路线是根据驾车路线规划出来的
2.导航是自定义的覆盖物
3.起点的位置是让浏览器自动获取

废话不多说，直接上代码

// 百度地图API功能start

var map = new BMap.Map(“allmap”);

(function() {  
    //初始化地图 默认加载北京天安门;初始化地图，point为中心点，缩放级别为16  
    map.centerAndZoom(new BMap.Point(116.331398, 39.897445), 11);  
    //判断手机浏览器是否支持定位  
    if(navigator.geolocation){  
        var geolocation = new BMap.Geolocation();//创建定位实例  
        geolocation.getCurrentPosition(showLocation,{enableHighAccuracy: true});//enableHighAccuracy 要求浏览器获取最佳结果  
    }else{  
        map.addControl(new BMap.GeolocationControl());//添加定位控件 支持定位  
    }  
});  
//处理定位后的信息  
function showLocation(r){  
    if(this.getStatus() == BMAP_STATUS_SUCCESS){//定位成功  
        var p1 = new BMap.Point(r.longitude,r.latitude);//定位位置  
        var p2 = new BMap.Point(shop_goods.Longitude,shop_goods.Latitude$);//产品位置

    map.panTo(p1);//拖拽    map.setCenter(p1);//等比例缩放    var driving = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true}});    driving.search(p1, p2);// 复杂的自定义覆盖物function ComplexCustomOverlay(point, text, mouseoverText){    this._point = point;    this._text = text;}ComplexCustomOverlay.prototype = new BMap.Overlay();ComplexCustomOverlay.prototype.initialize = function(map){    this._map = map;    var div = this._div = document.createElement("a");    div.setAttribute("class","open_appBtn" );    div.setAttribute("href","baidumap://map/direction?origin="+r.latitude+","+r.longitude+"|name:我的位置&destination=$shop_goods.Latitude$,$shop_goods.Longitude$&mode=driving&src=webapp.navi.yourCompanyName.yourAppName");      div.style.display = "block";    div.style.position = "absolute";    div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);    div.style.backgroundColor = "#EE5D5B";    div.style.border = "1px solid #BC3B3A";    div.style.color = "white";    div.style.width = "50px";    div.style.height = "18px";    div.style.padding = "2px";    div.style.lineHeight = "18px";    div.style.whiteSpace = "nowrap";    div.style.MozUserSelect = "none";    div.style.fontSize = "12px";    div.style.textAlign="center";    div.style.zIndex = "99999";    var span = this._span = document.createElement("span");    div.appendChild(span);    span.appendChild(document.createTextNode(this._text));    var that = this;    var arrow = this._arrow = document.createElement("span");    arrow.style.display = "block";    arrow.style.background = "url(http://map.baidu.com/fwmap/upload/r/map/fwmap/static/house/images/label.png) no-repeat";    arrow.style.position = "absolute";    arrow.style.width = "11px";    arrow.style.height = "10px";    arrow.style.top = "22px";    arrow.style.left = "20px";    arrow.style.overflow = "hidden";    div.appendChild(arrow);    map.getPanes().labelPane.appendChild(div);    return div;}// 实现绘制方法  ComplexCustomOverlay.prototype.draw = function(){// 根据地理坐标转换为像素坐标，并设置给容器    var map = this._map;    var pixel = map.pointToOverlayPixel(this._point);    this._div.style.left = pixel.x - parseInt(this._arrow.style.left) + "px";    this._div.style.top  = pixel.y - 66 + "px";}var myCompOverlay = new ComplexCustomOverlay(p2, "导航");map.addOverlay(myCompOverlay);var _marker01 = myCompOverlay; //当初存的覆盖物变量，这里派上用场了。

map.addEventListener(“touchstart”,function(e){
var element= e.domEvent.srcElement
element.click();
})

}else {    alert('failed'+this.getStatus());//定位失败}        

}
// 百度地图API功能end

需要注意的是:shopgoods.Latitude,shopgoods.Longitude这俩参数是终点位置的纬度和经度