百度地图搜索（二）

文件

一个js文件，内容为页面所用到的，数据都是假数据

var markers = [];

function selectEndControl() {
    // 默认停靠位置和偏移量
    this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
    this.defaultOffset = new BMap.Size(0, 0);
    if (opts) {
        if (opts.defaultAnchor) {
            this.defaultAnchor = opts.defaultAnchor;
        }
        if (opts.defaultOffset) {
            this.defaultOffset = opts.defaultOffset;
        }
    }
}
selectEndControl.prototype = new BMap.Control();
selectEndControl.prototype.initialize = function(map) {
    var This = this;
    var mapDiv = $("#allCarMap");
    var mapWidth = mapDiv.css("width");
    var div = $('<div style="width:25%"><div class="search"><p class="search-input"><input id="start-input" type="text" readonly value="" placeholder="请点击地图上车辆图标" class="search-input-first"><input id="end-input" type="text" value="" placeholder="请输入或点击地图上任一位置选择终点"><em class="icon-input-top"></em><em class="icon-input-bottom"></em></p><button class="search-btn" title="搜索"><span></span><label><em></em></label></button></div><div class="search-result"><ul class="search-result-title"><li class="select-back">推荐路线</li><li>最短路程</li><li class="result-title-last">不走高速</li></ul><div class="search-result-con"><div id="luxian-first" class="result-none sear-result-first"></div><div id="short-dis" class="result-none"></div><div id="no-go" class="result-none"></div></div></div><div id="searchResultPanel" style="border:1px solid #C0C0C0;width:250px;height:100px;overflow-y:auto; display:none;margin-top: 0;"></div></div>');
    map.getContainer().appendChild(div[0]);
    s2();
    return div[0];
}

var myValue;
function s2() {
    var ac = new BMap.Autocomplete( // 建立一个自动完成的对象
    {
        "input" : "end-input",
        "location" : map
    });
    ac.addEventListener("onhighlight", function(e) { // 鼠标放在下拉列表上的事件

        var str = "";
        var _value = e.fromitem.value;
        var value = "";
        if (e.fromitem.index > -1) {
            value = _value.province + _value.city + _value.district
                    + _value.street + _value.business;
        }
        str = "FromItem<br />index = " + e.fromitem.index + "<br />value = "
                + value;

        value = "";
        if (e.toitem.index > -1) {
            _value = e.toitem.value;
            value = _value.province + _value.city + _value.district
                    + _value.street + _value.business;
        }
        str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = "
                + value;
        G("searchResultPanel").innerHTML = str;
    });

    ac.addEventListener("onconfirm", function(e) { // 鼠标点击下拉列表后的事件
        var _value = e.item.value;
        myValue = _value.province + _value.city + _value.district
                + _value.street + _value.business;
        G("searchResultPanel").innerHTML = "onconfirm<br />index = "
                + e.item.index + "<br />myValue = " + myValue;

        setPlace();
    });

}

function setPlace() {
    // map.clearOverlays(); //清除地图上所有覆盖物
    function myFun() {
        var pp = local.getResults().getPoi(0).point; // 获取第一个智能搜索的结果
        map.centerAndZoom(pp, 18);
        var marker = new BMap.Marker(pp);
        map.addOverlay(marker); // 添加标注
        marker.disableDragging(); 
        //alert(pp.lng + pp.lat);
    }
    var local = new BMap.LocalSearch(map, { // 智能搜索
        onSearchComplete : myFun
    });
    local.search(myValue);
}

function startToEnd() {
    if (startPoint == null || endPoint == null) {
        $(".search-result").slideUp(500);
        return alert("请选择目的地！");
    }
    $(".search-result").slideDown(500);
    var p1 = new BMap.Point(startPoint.jingdu, startPoint.weidu);
    var p2 = new BMap.Point(endPoint.lng, endPoint.lat);
    var driving = new BMap.DrivingRoute(map, {
        renderOptions : {
            map : map,
            autoViewport : true
        },onInfoHtmlSet:function(poi,html){
            console.log('sssss');
            console.log(html);
        }
    });
    driving.search(p1, p2);
    startPoint = null;
    endPoint = null;
}

function removeLuxian() {
    var alls = map.getOverlays();
    for (var i = 0; i < alls.length; i++) {
        var s = 0;
        for (var j = 0; j < markers.length; j++) {
            if (alls[i].stationId == markers[j].stationId) {
                s = 1;
            }
        }
        if (s == 0) {
            console.log(alls[i]);
            map.removeOverlay(alls[i]);
        }
    }
}

function luxian(i) {
    // map.clearOverlays();
    removeLuxian();
    var st = $('#end-input').val();
    var st1 = $('#start-input').val();
    var routePolicy = [ BMAP_DRIVING_POLICY_LEAST_TIME,
            BMAP_DRIVING_POLICY_LEAST_DISTANCE,
            BMAP_DRIVING_POLICY_AVOID_HIGHWAYS ];
    var panels = [ 'luxian-first', 'short-dis', 'no-go' ];
    if (st == "" || st1 == "") {
        alert("起点终点不能为空！");
        $(".search-result").slideUp(500);
        return null;
    } else if (startLng == null || endLng == null) {
        alert("地图上没有找到该位置！");
        $(".search-result").slideUp(500);
        return null;
    }
    $(".search-result").slideDown(500);
    var p1 = new BMap.Point(startLng, startLat);
    var p2 = new BMap.Point(endLng, endLat);
    // console.log(map.getOverlays());
    var driving = new BMap.DrivingRoute(map, {
        renderOptions : {
            map : map,
            panel : panels[i],
            autoViewport : true
        }/*,onInfoHtmlSet:function(poi,html){
            console.log('sssss');
            console.log(html);
        }*/,
        policy : routePolicy[i],
        onPolylinesSet : function(routes) {
            searchRoute = routes[0].getPolyline();// 导航路线
            map.addOverlay(searchRoute);
        },
    /*
     * onMarkersSet:function(routes) { map.removeOverlay(routes[0].marker);
     * //删除起点 map.removeOverlay(routes[1].marker);//删除终点 },
     */
    /*
     * onResultsHtmlSet:function(container){
     *  }
     */
    });
    //console.log(driving);
    driving.search(p1, p2);
}

function callback() {
    var s = [ {
        'id' : '冀A1234',
        'jingdu' : '112.2691',
        'weidu' : '28.2542'
    }, {
        'id' : '冀B1234',
        'jingdu' : '112.2564',
        'weidu' : '28.7896'
    }, {
        'id' : '冀C1234',
        'jingdu' : '112.9586',
        'weidu' : '28.2143'
    }, {
        'id' : '冀D1234',
        'jingdu' : '112.2676',
        'weidu' : '28.1563'
    }, {
        'id' : '冀E1234',
        'jingdu' : '112.93',
        'weidu' : '28.26'
    }, {
        'id' : '冀F1234',
        'jingdu' : '112.3251',
        'weidu' : '28.8546'
    }, {
        'id' : '冀G1234',
        'jingdu' : '113.0123',
        'weidu' : '28.2501'
    }, {
        'id' : '冀H1234',
        'jingdu' : '112.4563',
        'weidu' : '28.4567'
    } ]
    for (var i = 0; i < s.length; i++) {
        newCarElement(s[i], s[i].jingdu, s[i].weidu);
    }

}

function setJngLat() {
    var s = [ {
        'id' : '冀A1234',
        'jingdu' : '112.2691',
        'weidu' : '28.2542'
    }, {
        'id' : '冀B1234',
        'jingdu' : '112.2564',
        'weidu' : '28.7896'
    }, {
        'id' : '冀C1234',
        'jingdu' : '112.9586',
        'weidu' : '28.2143'
    }, {
        'id' : '冀D1234',
        'jingdu' : '112.2676',
        'weidu' : '28.1563'
    }, {
        'id' : '冀E1234',
        'jingdu' : '112.93',
        'weidu' : '28.26'
    }, {
        'id' : '冀F1234',
        'jingdu' : '112.3251',
        'weidu' : '28.8546'
    }, {
        'id' : '冀G1234',
        'jingdu' : '113.0123',
        'weidu' : '28.2501'
    }, {
        'id' : '冀H1234',
        'jingdu' : '112.4563',
        'weidu' : '28.4567'
    } ]
    for (var i = 0; i < markers.length; i++) {
        for (var j = 0; j < s.length; j++) {
            if (s[j].id == markers[i].stationId) {
                var point = new BMap.Point(s[j].jingdu, s[j].weidu);
                markers[i].setPosition(point);
                console.log(s[j]);
            }
        }
    }
}

function newCarElement(id1, jingdu, weidu) {
    var iconUrl = "/csps/csps/images/jsd3.png";
    var myIcon = new BMap.Icon(iconUrl, new BMap.Size(20, 30), {
        offset : new BMap.Size(0, 0)
    });
    var point = new BMap.Point(jingdu, weidu);
    var newLabel = new BMap.Label(id1.id, {
        offset : new BMap.Size(10, -30)
    });
    var marker = new BMap.Marker(point, {
        icon : myIcon
    });
    map.centerAndZoom(point, 14);
    marker.stationId = id1.id;
    marker
            .addEventListener(
                    "click",
                    function() {
                        var initPoint = new BMap.Point(jingdu, weidu);
                        map.centerAndZoom(initPoint, 14);
                        $('#start-input').val(id1.id);
                        startLng = jingdu;
                        startLat = weidu;
                        //flag = 'false';
                        var labelContent = "<div style='width:280px;overflow:auto;'><span style='font-size:15px;font-weight:bold;'>车辆信息</span><table class='v' style='font-size:12px;'><tr><td style='width:80px'>车牌号：</td><td style='width:190px'>"
                                + id1.id
                                + "</td></tr>"
                                + "<tr><td>所属公司或者车队：</td><td>"
                                + 11111
                                + "</td></tr><tr><td>设备号：</td><td>"
                                + 1
                                + "</td></tr><tr><td valign='top' >设备所属公司：</td><td>"
                                + 1
                                + "</td></tr><tr><td>通道数目：</td><td>"
                                + 1
                                + "</td></tr>"
                                + "<tr><td>温度传感器数目：</td><td>"
                                + 1 + "</td></tr></table></div>";
                        showWeatherInfo(id1, labelContent, this);
                    });
    newLabel.setStyle({
        border : 0,
        borderRadius : "5px",
        paddingLeft : "7px",
        paddingRight : "7px",
        fontSize : "12px",
        height : "25px",
        lineHeight : "25px",
        fontFamily : "微软雅黑"
    });
    marker.setLabel(newLabel);
    map.addOverlay(marker);
    markers.push(marker);
}
// 显示气象信息
function showWeatherInfo(id1, labelInfo, th) {
    var opts = {};
    var infoWindow = new BMap.InfoWindow(labelInfo, opts);
    th.openInfoWindow(infoWindow);
}

页面效果图：