Baidu Map Information Alert box changes to

http://blog.csdn.net/jankercsdn/article/details/45392635 

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

A small project, Baidu map customization, the computer is a touch screen, support handwriting input, Chinese input directly call the system's virtual keyboard, handwriting input is a reference to the online master write a control.

Baidu Information Prompt box in the search box to enter the query address, that is, where to go, where the address input box, to solve the problem is how to put the virtual input keyboard content assigned to this address input box, and to determine the current input box.

The general use of informational cue box is to call this library "Http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"

Download this library and retrofit it

Adding Properties and methods

SearchInfoWindow.prototype.getOffset = function () {
return this._opts.offset;
}

Add here:

The current address type
SEARCHINFOWINDOW.PROTOTYPE.GETCURRSELADDR = function () {
return this._currseladdr;
}

Set address content
SearchInfoWindow.prototype.setSearchAddr = function (addr) {
This._setsearchaddr (addr);

},


Baidu.object.extend (searchinfowindow.prototype,{

.........................

//

/**
* Get the height and width of the Searchinfowindow
* @return None
*/
_getsearchinfowindowsize:function () {
This._boxwidth = parseint (this. container.offsetwidth,10);
This._boxheight = parseint (this.container.offsetheight,10);
},

According to the address selection settings, here to note, can only use the Value property, can not be used innerHTML and innertext (because not familiar with HTML and JS, here Card, not value how can not input text)
_setsearchaddr:function (addr) {
Switch (THIS._CURRSELADDR) {
Case Bmaplib_tab_search:
This.dom.searchText.value = addr;
Break
Case Bmaplib_tab_to_here:
This.dom.transText.value = addr;
Break
Case Bmaplib_tab_from_here:
This.dom.transText.value = addr;
Break
}


},

/**
* Block Event bubbling
* @return None
*/

...........................

Record the selected address type

Show current tab content and Highlight tab
Switch (type) {
Case Bmaplib_tab_search:
This.dom.seartTab.className = "Bmaplib_current";
This.dom.searchBox.style.display = "block";
This.dom.transBox.style.display = "None";
THIS._CURRSELADDR = Bmaplib_tab_search; Address Type
Break
Case Bmaplib_tab_to_here:
This.dom.tohereTab.className = "Bmaplib_current";
This.dom.searchBox.style.display = "None";
This.dom.transBox.style.display = "block";
This.dom.stationText.innerHTML = "starting point";
This._pointtype = "EndPoint";
THIS._CURRSELADDR = Bmaplib_tab_to_here; Address Type
Break
Case Bmaplib_tab_from_here:
This.dom.fromhereTab.className = "Bmaplib_current";
This.dom.searchBox.style.display = "None";
This.dom.transBox.style.display = "block";
This.dom.stationText.innerHTML = "end point";
This._pointtype = "StartPoint";
THIS._CURRSELADDR = Bmaplib_tab_from_here; Address Type
Break
}


This._firsttab.classname + = "Bmaplib_first";
},


/**
* Bind Auto-complete event
*/

Web document for Delphi invocation

Add tags and Information window
function Createmarkerandinfo (Mid, LNG, LAT, tel, addr, Micon, iImg) {
var point = new Bmap.point (Lng,lat);
var markericonf = new Bmap.icon (micon,new bmap.size (20,32));
var marker = new Bmap.marker (point,{icon:markericonf});
Marker.mid = mid;
Map.addoverlay (marker);
var label = new Bmap.label (mid,{offset:new bmap.size (20,-10)});
Marker.setlabel (label);


var infoimgf = ';
if (iImg! = ") {
INFOIMGF = ' ' Style= ' float:right;zoom:1;overflow:hidden;width:100px;height:100px;margin-left:3px; /> ';
}


var scontent = ' <div style= ' margin:0;line-height:20px;padding:2px; ' > ' + infoimgf+
' ' Style= ' float:right;zoom:1;overflow:hidden;width:100px;height:100px;margin-left:3px; /> ' +
' Address: ' +addr+ ' <br/> ' +
' Phone: ' +tel+ ' <br/> ' +
' </div> ';


var opts = {
Title:mid,//title
width:280,//width
height:120,//height
Panel: "Panel",//Search results panel
Enableautopan:true,//auto-pan
Enablesendtophone:false,//forbidden to send messages
Searchtypes: [
Bmaplib_tab_search,//around search
Bmaplib_tab_to_here,//GO here
Bmaplib_tab_from_here//Depart from here
]
};


var Searchinfowindow = new Bmaplib.searchinfowindow (map,scontent,opts);


MARKER.SIW = Searchinfowindow;


Arrmarkers.push (marker);


Marker.addeventlistener ("click", Function () {
Searchinfowindow.open (marker);
document.getElementById ("Markerid"). InnerHTML = Marker.mid;
});

Listen Information window open and close, when open, display the handwriting input button, closed when the ink button is hidden
Searchinfowindow.addeventlistener ("Open", function () {
document.getElementById ("Isopeninfo"). InnerHTML = 1;
});
Searchinfowindow.addeventlistener ("Close", function () {
document.getElementById ("Isopeninfo"). InnerHTML = 0;
});
}

Baidu Map Information Alert box changes to