【百度地图API】交你如何用百度地图搜索自己的数据！不需数据库！

摘要：

　　我有一定的房产数据，还有银行数据。我想在百度地图上标注出来，并且能搜索到我这些数据。

　　可是百度的数据库上并没有我的数据。我应该怎么办呢？

------------------------------------------------------------------------------------------

一、无需数据库，如何建立自己的地理信息表。

如果让初学者去建立数据库，那么意味着大家还要学习数据库，以及网站后端的知识。为了方便大家学习，使大家能够快速地掌握如何构建房产地图，银行地图等，酸奶小妹教大家一个“把数据存储在前端”，“搜索自己数据”的一个办法。（本文章要特别感谢不怕冷的小蚊子）

首先，我们需要为自己的数据建立一个数组，把它们存储起来。像这样。

//  标注点数组
    var BASEDATA = [
            {title:"奥亚酒店",content:"北苑路169号",point:"116.422792|40.009471",isOpen:1,icon:{w:21,h:21,l:115,t:46,x:1,lb:10}},
            {title:"珀丽酒店",content:"将台西路8号",point:"116.484289|39.97936",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},
            {title:"贵国酒店",content:"左家庄1号",point:"116.454494|39.964011",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},
            {title:"科通酒店",content:"民族园路8号院2号楼",point:"116.394601|39.987925",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},
            {title:"将台酒店",content:"酒仙桥路甲12号",point:"116.496024|39.976864",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},
            {title:"成宏酒店",content:"北四环东路惠新东桥西北侧",point:"116.429445|39.995392",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},
            {title:"华商酒店",content:"延静西里2号",point:"116.488962|39.921939",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},
            {title:"标华酒店",content:"北京市 朝阳区红庙路柴家湾1号",point:"116.489284|39.92104",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},
            {title:"万程酒店",content:"天坛路89号",point:"116.411762|39.89457",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},
            {title:"黎昌酒店",content:"永定门外彭庄乙58号",point:"116.393532|39.876272",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},
            {title:"北京银行",content:"北京市海淀区白石桥路39号",point:"116.329593|39.952398",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},
            {title:"海淀银行",content:"丹棱街16西门",point:"116.315551|39.984388",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},
            {title:"北京银行",content:"北京市西城区文津街附近",point:"116.391713|39.929007",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},
            {title:"首都银行",content:"东三环南路88号",point:"116.469899|39.87684",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},
            {title:"国家银行",content:"中关村南大街33号",point:"116.331292|39.949031",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},
            {title:"崇文区银行",content:"北京市崇文区花市大街113号（乐天玛特超市旁）的敕建火德真君庙内",point:"116.427671|39.903568",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},
            {title:"朝阳区银行",content:"北京市朝阳区朝外小庄金台里17号",point:"116.47766|39.922295",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},
            {title:"宣武区银行",content:"教子胡同8号",point:"116.374561|39.894302",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},
            {title:"东城区银行",content:"交道口东大街85号",point:"116.41927|39.9474",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},
            {title:"西城区银行",content:"北京市西城区后广平胡同26号",point:"116.368099|39.942332",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}}
         ]
      

注意：这部分是写在js里的。

其中，title是信息窗口打开后的标题，同时也是label标签的取值；

content是信息窗口的内容；

point是经纬度，请使用百度坐标（获取地址：http://dev.baidu.com/wiki/static/map/API/tool/getPoint/）；

isopen是控制信息窗口是否打开的开关；

icon里的选项是控制marker图片的，width是宽、hight是高等等。

二、如何查找，并显示自己的数据

你需要在html中写一个搜索框，一个搜索按钮。

<p>
    <input id="keyword" type="text" style="150px;" value="银行"/>
    <input type="button" value="搜索" onclick="search('type','show','keyword')"/>
</p> 

搜索框，需要一个id，例如keyword来传递要搜索的参数。我写了银行。本案例中，由于有酒店数据，你还可以写酒店。

搜索按钮，上面需要一个点击事件onclick="search('type','show','keyword')"。根据type类型、show是否显示、keyword关键词来做搜索。

那么，当搜索的内容，就是id=keyword里面的keyword和我自己的数据，就是步骤一里的数组，相同时，我就创建一个marker标注，并且默认打开它的信息窗口。

 

window.search = function(name_t,name_s,id_d){
        var t_o = document.getElementsByName(name_t);
        var s_o = document.getElementsByName(name_s);
        var s_v,t_v,d_v = document.getElementById(id_d).value;
        for(var i = 0; i < t_o.length; i++){
            if(t_o[i].checked){
                t_v = t_o[i].value;
            }
        }
        for(var i = 0; i < s_o.length; i++){
            if(s_o[i].checked){
                s_v = s_o[i].value;
            }
        }
        searchClass.trim(t_v) == "" && (t_v = "single");
        var dd = searchClass.search({k:"title",d:d_v,t:t_v,s:s_v});
        addMarker(dd);//向地图中添加marker
    }

三、全部源代码

为了更加符合用户的搜索习惯，我设计了精确超找、和模糊查找两种情况。

精确查找：就是用户输入的keyword，和我数据库里的一摸一样 时，就打开信息窗口。这时候一般只能打开一个。因为你自己的数据应该不会有重复的。

模糊查找：比如查找酒店，会显示全部的酒店。比如查找银行，会显示全部的银行数据。默认打开第一个的信息窗口。

为了方便大家看到我添加进去的数据信息，这里还设计了“仅查找到的内容”和“显示所有的内容”。

仅查找到的内容：用户搜什么，就显示出什么来。

显示所有的内容：显示我全部添加的数据。

全部源代码在这里，我减去了很多数据。大家可以自己添加。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>自家数据+前端搜索</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.1&services=true"></script>
</head>
<body>
<div style="520px;height:340px;border:1px solid gray" id="container"></div>
<p>
    二选一：
    <input id="type1" type="radio" name="type" value="single"/><label for="type1">精准查找</label>
    <input id="type2" type="radio" name="type" value="more" checked="checked"/><label for="type2">模糊查找</label>
</p>
<p>二选一：
    
    <input id="show1" type="radio" name="show" value="" checked="checked"/><label for="show1">仅查找到的内容</label>
    <input id="show2" type="radio" name="show" value="all"/><label for="show2">显示所有内容</label>
</p>
<p>
    <input id="keyword" type="text" style="150px;" value="银行"/>
    <input type="button" value="搜索" onclick="search('type','show','keyword')"/>
</p> 
</body>
</html>
<script type="text/javascript">
    //  标注点数组
    var BASEDATA = [
            {title:"奥亚酒店",content:"北苑路169号",point:"116.422792|40.009471",isOpen:1,icon:{w:21,h:21,l:115,t:46,x:1,lb:10}},
            {title:"珀丽酒店",content:"将台西路8号",point:"116.484289|39.97936",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},
            {title:"北京银行",content:"北京市海淀区白石桥路39号",point:"116.329593|39.952398",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},
            {title:"海淀银行",content:"丹棱街16西门",point:"116.315551|39.984388",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},
         ]
         
    //创建和初始化地图函数：
    function initMap(){
        window.map = new BMap.Map("container");
        map.centerAndZoom(new BMap.Point(116.412318,39.887037),12);
        map.enableScrollWheelZoom();
     map.addControl(new BMap.NavigationControl());
        window.searchClass = new SearchClass();
        searchClass.setData(BASEDATA)
        var dd = searchClass.search({k:"title",d:"银行",t:"more",s:""});//t:{single|more},s{all|!all}
        addMarker(dd);//向地图中添加marker
    }
    window.search = function(name_t,name_s,id_d){
        var t_o = document.getElementsByName(name_t);
        var s_o = document.getElementsByName(name_s);
        var s_v,t_v,d_v = document.getElementById(id_d).value;
        for(var i = 0; i < t_o.length; i++){
            if(t_o[i].checked){
                t_v = t_o[i].value;
            }
        }
        for(var i = 0; i < s_o.length; i++){
            if(s_o[i].checked){
                s_v = s_o[i].value;
            }
        }
        searchClass.trim(t_v) == "" && (t_v = "single");
        var dd = searchClass.search({k:"title",d:d_v,t:t_v,s:s_v});
        addMarker(dd);//向地图中添加marker
    }
    
    //创建marker
    window.addMarker = function (data){
        map.clearOverlays();
        for(var i=0;i<data.length;i++){
            var json = data[i];
            var p0 = json.point.split("|")[0];
            var p1 = json.point.split("|")[1];
            var point = new BMap.Point(p0,p1);
            var iconImg = createIcon(json.icon);
            var marker = new BMap.Marker(point,{icon:iconImg});
            var iw = createInfoWindow(i);
            var label = new BMap.Label(json.title,{"offset":new BMap.Size(json.icon.lb-json.icon.x+10,-20)});
            marker.setLabel(label);
            map.addOverlay(marker);
            label.setStyle({
                        borderColor:"#808080",
                        color:"#333",
                        cursor:"pointer"
            });

            (function(){
    var _json = json;
    var _iw = createInfoWindow(_json);
    var _marker = marker;
    _marker.addEventListener("click",function(){
        this.openInfoWindow(_iw);
       });
       _iw.addEventListener("open",function(){
        _marker.getLabel().hide();
       })
       _iw.addEventListener("close",function(){
        _marker.getLabel().show();
       })
    label.addEventListener("click",function(){
        _marker.openInfoWindow(_iw);
       })
    if(!!json.isOpen){
     label.hide();
     _marker.openInfoWindow(_iw);
    }
   })()
        }
    }
    //创建InfoWindow
    function createInfoWindow(json){
        var iw = new BMap.InfoWindow("<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b><div class='iw_poi_content'>"+json.content+"</div>");
        return iw;
    }
    //创建一个Icon
    function createIcon(json){
        var icon = new BMap.Icon("http://openapi.baidu.com/map/images/us_mk_icon.png", new BMap.Size(json.w,json.h),{imageOffset: new BMap.Size(-json.l,-json.t),infoWindowOffset:new BMap.Size(json.lb+5,1),offset:new BMap.Size(json.x,json.h)})
        return icon;
    }
    
    function SearchClass(data){
        this.datas = data;
    }
    // rule = {k:"title",d:"酒店",s:"all",t:"single"}=>t{single:(key=?),more:(key like[%?%])}//t:{single|more},s{all|!all}
    SearchClass.prototype.search = function(rule){
        if(this.datas == null){alert("数据不存在!");return false;}
        if(this.trim(rule) == "" || this.trim(rule.d) == "" || this.trim(rule.k) == "" || this.trim(rule.t) == ""){alert("请指定要搜索内容!");return false;}
        var reval = [];
        var datas = this.datas;
        var len = datas.length;
        var me = this;
        var ruleReg = new RegExp(this.trim(rule.d));
        var hasOpen = false;
        
        var addData = function(data,isOpen){
            // 第一条数据打开信息窗口
            if(isOpen && !hasOpen){
                hasOpen = true;
                data.isOpen = 1;
            }else{
                data.isOpen = 0;
            }
            reval.push(data);
        }
        var getData = function(data,key){
            var ks = me.trim(key).split(/\./);
            var i = null,s = "data";
            if(ks.length == 0){
                return data;
            }else{
                for(var i = 0; i < ks.length; i++){
                    s += '["' + ks[i] + '"]';
                }
                return eval(s);
            }
        }
        for(var cnt = 0; cnt < len; cnt++){
            var data = datas[cnt];
            var d = getData(data,rule.k);
            if(rule.t == "single" && rule.d == d){
                addData(data,true);
            }else if(rule.t != "single" && ruleReg.test(d)){
                addData(data,true);
            }else if(rule.s == "all"){
                addData(data,false);
            }
        }
        return reval;
    }
    SearchClass.prototype.setData = function(data){
        this.datas = data;
    }
    SearchClass.prototype.trim = function(str){
     if(str == null){str = "";}else{ str = str.toString();}
        return str.replace(/(^[\s\t\xa0\u3000]+)|([\u3000\xa0\s\t]+$)/g, "");
    }
    
    
    initMap();//创建和初始化地图
</script>

四、示例运行请点击以下网址

http://dev.baidu.com/wiki/static/map/API/examples/?v=1.1&3_6#3&6