【百度地圖API】交你如何用百度地圖搜索本身的數據！不需數據庫！【百度地圖API】交你如何用百度地圖搜索本身的數據！不需數據庫！

時間 2019-12-08

標籤百度地圖API 如何百度地圖搜索本身數據不需數據庫欄目 SQL 简体版

原文原文鏈接

原文: 【百度地圖API】交你如何用百度地圖搜索本身的數據！不需數據庫！

摘要：javascript

　　我有必定的房產數據，還有銀行數據。我想在百度地圖上標註出來，而且能搜索到我這些數據。html

　　但是百度的數據庫上並無個人數據。我應該怎麼辦呢？前端

------------------------------------------------------------------------------------------java

1、無需數據庫，如何創建本身的地理信息表。數據庫

若是讓初學者去創建數據庫，那麼意味着你們還要學習數據庫，以及網站後端的知識。爲了方便你們學習，使你們可以快速地掌握如何構建房產地圖，銀行地圖等，酸奶小妹教你們一個「把數據存儲在前端」，「搜索本身數據」的一個辦法。（本文章要特別感謝不怕冷的小蚊子）json

首先，咱們須要爲本身的數據創建一個數組，把它們存儲起來。像這樣。後端

// 標註點數組
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裏的。api

其中，title是信息窗口打開後的標題，同時也是label標籤的取值；數組

content是信息窗口的內容；ide

point是經緯度，請使用百度座標（獲取地址：http://dev.baidu.com/wiki/static/map/API/tool/getPoint/）；

isopen是控制信息窗口是否打開的開關；

icon裏的選項是控制marker圖片的，width是寬、hight是高等等。

2、如何查找，並顯示本身的數據

你須要在html中寫一個搜索框，一個搜索按鈕。

< p >
< input id ="keyword" type ="text" style ="width: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標註，而且默認打開它的信息窗口。

3、所有源代碼

爲了更加符合用戶的搜索習慣，我設計了精確超找、和模糊查找兩種狀況。

精確查找：就是用戶輸入的keyword，和我數據庫裏的一摸同樣時，就打開信息窗口。這時候通常只能打開一個。由於你本身的數據應該不會有重複的。

模糊查找：好比查找酒店，會顯示所有的酒店。好比查找銀行，會顯示所有的銀行數據。默認打開第一個的信息窗口。

爲了方便你們看到我添加進去的數據信息，這裏還設計了「僅查找到的內容」和「顯示全部的內容」。

僅查找到的內容：用戶搜什麼，就顯示出什麼來。

顯示全部的內容：顯示我所有添加的數據。

所有源代碼在這裏，我減去了不少數據。你們能夠本身添加。

View Code

< 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 ="width: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 ="width: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 >

4、示例運行請點擊如下網址

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