<div class="codetitle"> <span><a style="CURSOR: pointer" data="85190" class="copybut" id="copybut85190" onclick="doCopy('code85190')"><u>Copy code</u></a></span> The code is as follows:</div> <div class="codebody" id="code85190"> <br><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br><html xmlns="http://www.w3.org/1999/xhtml"> <br><head> <br><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <br><title>无标题文档</title> <br></head> <br><input type="button" value="test" style="height:500px" /> <br>选择经度:<input type="text" id="txtSelect" /> <br><iframe name="map" src="baidumap.htm" id="map" style="display:none"></iframe> <br><body> <br></body> <br></html> <br><script type="text/javascript"> <br>document.getElementById("txtSelect").onfocus=function(){ <br>var windows = document.getElementById("window"); <br>var title = document.getElementById("title"); <br>var layer = document.getElementById("layer"); <br>if(windows==null&&layer==null&&title==null){ <br>var style = document.createElement("style"); <br>style.type="text/css"; <br>document.body.appendChild(style); <br>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}"; <br>styleText ="#window{position:absolute; z-index:1000;background:#ffc;}"; <br>styleText ="#title{ background:#CCFFFF;width:100%;height:15%;font-size:2em;font-weight:bold; text-align:left; line-height:1.5em }" <br>styleText ="#content{ height:85%;width:100%;background:#CCCCCC}"; <br>styleText ="#frame{ width:100%;height:100%;} #map{ width:100%;height:100%}"; <br>try{ <br>if(typeof style.styleSheet.cssText!="undefined"){ <br>style.styleSheet.cssText=styleText; <br>} <br>}catch(ex){ <br>style.appendChild(document.createTextNode(styleText)); <br>} <br>var layer = document.createElement("div"); <br>document.body.appendChild(layer); <br>layer.id="layer"; <br>var windows = document.createElement("div"); <br>document.body.appendChild(windows); <br>windows.id="window"; <br>windows.style.height="400px"; <br>windows.style.width = "600px"; <br>var height = parseInt(windows.style.height); <br>var width = parseInt(windows.style.width); <br>windows.style.top = parseInt(document.documentElement.clientHeight/2-height/2) "px"; <br>windows.style.left = parseInt(document.documentElement.clientWidth/2-width/2) "px"; <br>var title = document.createElement("div"); <br>windows.appendChild(title); <br>title.id="title"; <br>title.appendChild(document.createTextNode("点此关闭")); <br>var content = document.createElement("div"); <br>windows.appendChild(content); <br>content.id="content"; <br>var map = document.getElementById("map"); <br>content.appendChild(map); <br>map.style.display="block"; <br>if(typeof layer.style.opacity!="undefined"){ <br>layer.style.opacity=0.5; <br>} <br>else if(typeof layer.style.filter!="undefined"){ <br>layer.style.filter="alpha(opacity=50)"; <br>} <br>} <br>else{ <br>if(typeof layer.style.opacity!="undefined"){ <br>layer.style.opacity=0.5; <br>} <br>else if(typeof layer.style.filter!="undefined"){ <br>layer.style.filter="alpha(opacity=50)"; <br>} <br>layer.style.zIndex=100; <br>windows.style.zIndex=1000; <br>layer.style.display="block"; <br>windows.style.display="block"; <br>} <br>layer.onclick = title.onclick = function(){ <br>windows.style.zIndex=-1000; <br>windows.style.display="none"; <br>//让层渐隐 <br>var timer = setTimeout(displayLayer,200); <br>function displayLayer(){ <br>if(typeof layer.style.opacity!="undefined"){ <br>var layers = document.getElementById("layer"); <br>var opacity = parseFloat(layers.style.opacity); <br>opacity = opacity-0.1; <br>if(opacity>0){ <br>setTimeout(arguments.callee,100); <br>} <br>else if(opacity<0){ <BR>layers.style.zIndex=-100; <BR>clearTimeout(timer); <BR>} <BR>layers.style.opacity = opacity; <BR>} <BR>else if(typeof layer.style.filter!="undefined"){ <BR>var layers = document.getElementById("layer"); <BR>var filterStyle = layers.style.filter; <BR>//opacity = parseInt(filterStyle.substring(filterStyle.indexOf("=") 1)); <BR>var opacity = parseInt(filterStyle.match(/d /)); <BR>opacity = opacity-10; <BR>if(opacity>0){ <br>setTimeout(arguments.callee,100); <br>} <br>else if(opacity<0){ <BR>layers.style.zIndex=-100; <BR>clearTimeout(timer); <BR>} <BR>layers.style.filter = "alpha(opacity=" opacity ")"; <BR>} <BR>else{ <BR>throw new Error("your browser version lower!"); <BR>} <BR>} <BR>document.getElementById("txtSelect").value=frames["map"].document.getElementById("hidden").value; <BR>} <BR>}<BR>window.onunload=function(){ <BR>var windows = document.getElementById("window"); <BR>var title = document.getElementById("title"); <BR>var layer = document.getElementById ("layer"); <BR>layer.onclick = windows.onclick=null; //Clear event binding <BR>document.body.removeChild(layer); <BR>windows.removeChild(title); <BR> document.body.removeChild(windows); <BR>} <BR></script> <br> </div> <br>This is the page of that frame, showing the coordinates of Baidu Map<br><div class="codetitle"> <span><a style="CURSOR: pointer" data="76905" class="copybut" id="copybut76905" onclick="doCopy('code76905')"><u>Copy code</u></a></span> The code is as follows:</div> <div class="codebody" id="code76905"> <br><html> <br><head> <br><meta http-equiv ="Content-Type" content="text ml; charset=utf-8"> <br><title>Baidu Map</title> <br><script type="text/javascript" src=" http://api.map.baidu.com/api?key=458d39374361da27e548367a735831ba&v=1.0&services=true"></script> <br><link href="/Theme/Default/Admin/reset.css" rel="stylesheet" type="text/css" /> <br><link href="/Theme/Default/Admin/style.css" rel="stylesheet" type="text/css" /> <br></head> <br><body> <br><div> <br><form> <br><div style="position: absolute; width: 730px; height: 590px; top: 35; left: 0; border: 1px solid gray; overflow-y: hidden;" id="container"> <br></div> <br><input id="text_" class=" textbox200" style="width: 150px" type="text" value="Chengdu" /> <br><input class="button90" type="button" value="Query" onClick="searchByStationName(document. getElementById('text_').value);" /> <br><input type="hidden" id="hidden" value="104.105, 30.624" /> <br></form> <br></div> <br></body> <br><script type="text/javascript"> <br>var map = new BMap.Map("container"); <br>map. centerAndZoom(new BMap.Point(104.105, 30.624), 6); <br>map.addControl(new BMap.NavigationControl()); //Navigation<br>map.addControl(new BMap.ScaleControl()); <br>map.addControl(new BMap.OverviewMapControl()); <br>map.addEventListener("click", function (e) { <br>document.getElementById("hidden").value = e.point.lng ", " e.point.lat; <br>}); <br>var localSearch = new BMap.LocalSearch(map, { <br>renderOptions: { <br>pageCapacity: 8, <br>autoViewport: true, <br> selectFirstResult: false <br>} <br>}); <br>localSearch.enableAutoViewport(); <br>function searchByStationName(name) { <br>var keyword = name; <br>localSearch.setSearchCompleteCallback(function (searchResult) { <br>var poi = searchResult.getPoi(0); <br>alert(poi.point.lng " " poi.point.lat); <br>document.getElementById("hidden").value = e.point .lng "," e.point.lat; <br>map.centerAndZoom(poi.point, 8); <br>}); <br>localSearch.search(keyword); <br>} <br>< /script> <br></html> <br> </div>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
