百度地图搜索（二）

文件

一个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);}

页面效果图：