Baidu Map overlay-Custom search results. Default red overlay covers how to solve the new custom overlay. - Codes Helper

< html lang= "en" >
< head >

<meta charset="UTF-8">
<title>Title</title>
<style>
    body{
        padding: 0;
        margin: 0 auto;
    }
    -sharpdemo{
        width: 100%;

    }
</style>

< / head >
< body >

< div id= "demo" > < / div >
< select name= "" id= "province" value= ">

<option value=""></option>
<option value=""></option>
<option value=""></option>

< / select >
< select name= "" id= "city" disabled= "disabled" value= ">

<option value=""></option>
<option value=""></option>

< / select >
< select name= "" id= "area" disabled= "disabled" value= ">

<option value=""></option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
<option value=""></option>

< / select >
< input type= "button" class= "btn" value= "search

< div class= "add_result" > < / div >
< / body >
< script src= " http://code.jquery.com/jquery...;></script>
<script type= "text/javascript" src= ";ak=BNfhaSSFf3ZzQCpqXvqgWOeGFKty46cG"></script>
<script>

$("-sharpprovince").change(function () {
    if($("-sharpprovince").val()!=""){
        $("-sharpcity").removeAttr("disabled")
    }else{
        $("-sharpcity").attr("disabled","disabled")
    }
})
$("-sharpcity").change(function () {
    if($("-sharpprovince").val()!=""){
        $("-sharparea").removeAttr("disabled")
    }else{
        $("-sharparea").attr("disabled","disabled")
    }
})

$("-sharpdemo").height($(window).height()/1.2)
var map = new BMap.Map("demo");
function replaceIcon(iconPath, marker, sizeW, sizeH) {
    map.removeOverlay(marker);
    var icons = iconPath; //
    var icon = new BMap.Icon(icons, new BMap.Size(sizeW, sizeH)); //

    marker.setIcon(icon);//
    map.addOverlay(marker);//
}
map.enableScrollWheelZoom(true);
// var myIcon = new BMap.Icon("http://a.tiles.mapbox.com/v3/marker/pin-m-w+009f9f.png", new BMap.Size(50,50),{imageOffset:new BMap.Size(0,0)});
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
    if(this.getStatus() == BMAP_STATUS_SUCCESS){

        marker2= new BMap.Marker(r.point);
        map.centerAndZoom(r.point, 16);

        var iconPath="http://a.tiles.mapbox.com/v3/marker/pin-m-w+009f9f.png";
        replaceIcon(iconPath, marker2, 40, 40);

        map.addOverlay(marker2);
        // map.panTo(r.point);
    }
    else {
        alert("failed"+this.getStatus());
    }
});
var marker2;
function sear(addr) {
    var local = new BMap.LocalSearch(map, {
        renderOptions:{map: map},
        onSearchComplete:function (getLocalResult) {
            map.clearOverlays();
            console.log(getLocalResult)
            for(var i= 0;i<getLocalResult.Ar.length;iPP){

                $("<li>"+getLocalResult.Ar[i].title+"</li>").appendTo(".add_result");

                marker2 = new BMap.Marker(getLocalResult.Ar[i].point);  // 

                var iconPath="http://a.tiles.mapbox.com/v3/marker/pin-m-w+009f9f.png";
                replaceIcon(iconPath, marker2, 40, 40);
                map.addOverlay(marker2);
            }
        }
    });
    local.search(addr);

}

$(".btn") .click (function () {

)

   var addr=$("-sharpprovince").val()+$("-sharpcity").val()+$("-sharparea").val()+"";
   sear(addr);

})

< / script >
< / html >