Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> untitled document </title>
</Head>
<Input type = "button" value = "test" style = "height: 500px"/>
Select longitude: <input type = "text" id = "txtSelect"/>
<Iframe name = "map" src = "baidumap.htm" id = "map" style = "display: none"> </iframe>
<Body>
</Body>
</Html>
<Script type = "text/javascript">
Document. getElementById ("txtSelect"). onfocus = function (){
Var windows = document. getElementById ("window ");
Var title = document. getElementById ("title ");
Var layer = document. getElementById ("layer ");
If (windows = null & layer = null & title = null ){
Var style = document. createElement ("style ");
Style. type = "text/css ";
Document. body. appendChild (style );
Var styleText = "# layer {width: 100%; height: 100%; background: #000000; position: absolute; z-index: 100; left: 0; top: 0; filter: alpha (opacity = 40); opacity: 0.4 }";
StyleText + = "# window {position: absolute; z-index: 1000; background: # ffc ;}";
StyleText + = "# title {background: # CCFFFF; width: 100%; height: 15%; font-size: 2em; font-weight: bold; text-align: left; line-height: 1.5em }"
StyleText + = "# content {height: 85%; width: 100%; background: # CCCCCC }";
StyleText + = "# frame {width: 100%; height: 100% ;}# map {width: 100%; height: 100% }";
Try {
If (typeof style.styleSheet.css Text! = "Undefined "){
Style.styleSheet.css Text = styleText;
}
} Catch (ex ){
Style. appendChild (document. createTextNode (styleText ));
}
Var layer = document. createElement ("div ");
Document. body. appendChild (layer );
Layer. id = "layer ";
Var windows = document. createElement ("div ");
Document. body. appendChild (windows );
Windows. id = "window ";
Windows. style. height = "400px ";
Windows. style. width = "600px ";
Var height = parseInt (windows. style. height );
Var width = parseInt (windows. style. width );
Windows. style. top = parseInt(document.doc umentElement. clientHeight/2-height/2) + "px ";
Windows. style. left = parseInt(document.doc umentElement. clientWidth/2-width/2) + "px ";
Var title = document. createElement ("div ");
Windows. appendChild (title );
Title. id = "title ";
Title. appendChild (document. createTextNode ("click to close "));
Var content = document. createElement ("div ");
Windows. appendChild (content );
Content. id = "content ";
Var map = document. getElementById ("map ");
Content. appendChild (map );
Map. style. display = "block ";
If (typeof layer. style. opacity! = "Undefined "){
Layer. style. opacity = 0.5;
}
Else if (typeof layer. style. filter! = "Undefined "){
Layer. style. filter = "alpha (opacity = 50 )";
}
}
Else {
If (typeof layer. style. opacity! = "Undefined "){
Layer. style. opacity = 0.5;
}
Else if (typeof layer. style. filter! = "Undefined "){
Layer. style. filter = "alpha (opacity = 50 )";
}
Layer. style. zIndex = 100;
Windows. style. zIndex = 1000;
Layer. style. display = "block ";
Windows. style. display = "block ";
}
Layer. onclick = title. onclick = function (){
Windows. style. zIndex =-1000;
Windows. style. display = "none ";
// Fade the Layer
Var timer = setTimeout (displayLayer, 200 );
Function displayLayer (){
If (typeof layer. style. opacity! = "Undefined "){
Var layers = document. getElementById ("layer ");
Var opacity = parseFloat (layers. style. opacity );
Opacity = opacity-0.1;
If (opacity> 0 ){
SetTimeout (arguments. callee, 100 );
}
Else if (opacity <0 ){
Layers. style. zIndex =-100;
ClearTimeout (timer );
}
Layers. style. opacity = opacity;
}
Else if (typeof layer. style. filter! = "Undefined "){
Var layers = document. getElementById ("layer ");
Var filterStyle = layers. style. filter;
// Opacity = parseInt (filterStyle. substring (filterStyle. indexOf ("=") + 1 ));
Var opacity = parseInt (filterStyle. match (/\ d + /));
Opacity = opacity-10;
If (opacity> 0 ){
SetTimeout (arguments. callee, 100 );
}
Else if (opacity <0 ){
Layers. style. zIndex =-100;
ClearTimeout (timer );
}
Layers. style. filter = "alpha (opacity =" + opacity + ")";
}
Else {
Throw new Error ("your browser version lower! ");
}
}
Document. getElementById ("txtSelect"). value = frames ["map" ].doc ument. getElementById ("hidden"). value;
}
}
Window. onunload = function (){
Var windows = document. getElementById ("window ");
Var title = document. getElementById ("title ");
Var layer = document. getElementById ("layer ");
Layer. onclick = windows. onclick = null; // clear event binding
Document. body. removeChild (layer );
Windows. removeChild (title );
Document. body. removeChild (windows );
}
</Script>
This is the frame page, showing the coordinates of Baidu Map
Copy codeThe Code is as follows:
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text ml; charset = UTF-8">
<Title> Baidu Map </title>
<Script type = "text/javascript" src = "http://api.map.baidu.com/api? Key = 458d39374361da27e548425a735831ba & v = 1.0 & services = true "> </script>
<Link href = "/Theme/Default/Admin/reset.css" rel = "stylesheet" type = "text/css"/>
<Link href = "/Theme/Default/Admin/style.css" rel = "stylesheet" type = "text/css"/>
</Head>
<Body>
<Div>
<Form>
<Div style = "position: absolute; width: 730px; height: 590px; top: 35; left: 0; border: 1px solid gray; overflow-y: hidden; "id =" container ">
</Div>
<Input id = "text _" class = "textbox200" style = "width: 150px" type = "text" value = "Chengdu"/>
<Input class = "button90" type = "button" value = "query" onClick = "searchByStationName (document. getElementById ('text _ '). value);"/>
<Input type = "hidden" id = "hidden" value = "104.105, 30.624"/>
</Form>
</Div>
</Body>
<Script type = "text/javascript">
Var map = new BMap. Map ("container ");
Map. centerAndZoom (new BMap. Point (104.105, 30.624), 6 );
Map. addControl (new BMap. NavigationControl (); // navigation
Map. addControl (new BMap. ScaleControl ());
Map. addControl (new BMap. OverviewMapControl ());
Map. addEventListener ("click", function (e ){
Document. getElementById ("hidden"). value = e. point. lng + "," + e. point. lat;
});
Var localSearch = new BMap. LocalSearch (map ,{
RenderOptions :{
PageCapacity: 8,
AutoViewport: true,
SelectFirstResult: false
}
});
LocalSearch. enableAutoViewport ();
Function searchByStationName (name ){
Var keyword = name;
LocalSearch. setSearchCompleteCallback (function (searchResult ){
Var poi = searchResult. getPoi (0 );
Alert (poi. point. lng + "+ poi. point. lat );
Document. getElementById ("hidden"). value = e. point. lng + "," + e. point. lat;
Map. centerAndZoom (poi. point, 8 );
});
LocalSearch. search (keyword );
}
</Script>
</Html>