騰訊地圖的引用html
程式碼：
<!DOCTYPE html> <html>
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title>成都天府新區人民法院</title> <link rel="stylesheet" type="text/css" href="css/index.css" /> <style type="text/css"> .lists { text-align: center; margin: 1000px auto; font-size: 20px; } a { font-size: 16px; padding: 5px; } a:link { color: blue; text-decoration: none; } //未訪問：藍色、無下劃線 a:active: { color: red; } //啟用：紅色 a:visited { color: purple; text-decoration: none; } //已訪問：紫色、無下劃線 a:hover { color: red; text-decoration: underline; } //滑鼠移近：紅色、下劃線 </style> <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script> <script> var map = null; var searchService = null;
var init = function() { var center = new qq.maps.LatLng(39.916527, 116.397128); map = new qq.maps.Map(document.getElementById('container'), { center: center, zoomLevel: 13 }); //呼叫Poi檢索類 searchService = new qq.maps.SearchService({ panel: document.getElementById('infoDiv'), map: map }); getResult(); }
function getResult() {
//設定searchRequest var poiText = document.getElementById("poiText").value; var regionText = document.getElementById("regionText").value;
searchService.setLocation(regionText);
searchService.search(poiText);
} </script> </head>
<body onload="init()"> <div id="father"> <div class="top"> <div class="count_icon"> <img src="img/count.jpg" /> </div> <div class="count_name"> <font style="font-size: 30px;"><b>天 府 新 區 法 院</b></font><br /> <font style="font-size: 20px;">HTTP://WWW.CDTFFY.GOV.CN</font> </div> <div class="search"> <select class="search_bar"> <option value="">全部欄目</option> </select> <input type="search" class="search_text" id="search_text" value="" placeholder="請輸入關鍵字" /> <img src="img/search.jpg" class="search_btn" id="search_btn" /> </div> </div>
<!--選單欄--> <div class="nav"> <div class=""> <div class=""> <i class="icon i-nav-arr"></i> <a href="/index.asp" class="title">首頁</a> <div class="menu-bg"></div> </div>
<div class="main-menu "> <i class="icon i-nav-arr"></i> <a href="#" class="title" >新聞中心</a> <div class="menu-bg"></div> <ul>
<li> <a href="#" title="要聞">要聞</a> </li>
<li> <a href="#" title="法院動態">法院動態</a> </li>
<li> <a href="#" title="圖文傳真">圖文傳真</a> </li>
<li> <a href="#" title="典型案例">典型案例</a> </li>
<li> <a href="#" title="執行快遞">執行快遞</a> </li>
</ul> </div>
<div class="main-menu "> <i class="icon i-nav-arr"></i> <a href="#" class="title" >審務公開</a> <div class="menu-bg"></div> <ul>
<li> <a href="#" title="審判公開" target="_blank">審判公開</a> </li>
<li> <a href="#" title="文書公開" target="_blank">文書公開</a> </li>
<li> <a href="#" title="執行公開" target="_blank">執行公開</a> </li>
<li> <a href="#4" title="庭審實錄">庭審實錄</a> </li>
</ul> </div>
<div class="main-menu "> <i class="icon i-nav-arr"></i> <a href="#" class="title" >便民服務</a> <div class="menu-bg"></div> <ul>
<li> <a href="#" title="綠色通道">綠色通道</a> </li>
<li> <a href="#" title="訴訟指南">訴訟指南</a> </li>
<li> <a href="#" title="網上訴訟服務中心">網上訴訟服務中心</a> </li>
<li> <a href="#" title="法制金牛" target="_blank">法制金牛</a> </li>
</ul> </div>
<div class="main-menu "> <i class="icon i-nav-arr"></i> <a href="#" class="title" >法院建設</a> <div class="menu-bg"></div> <ul>
<li> <a href="#" title="法院管理">法院管理</a> </li>
<li> <a href="#" title="先進典型">先進典型</a> </li>
<li> <a href="#" title="人事資訊">人事資訊</a> </li>
</ul> </div>
<div class="main-menu "> <i class="icon i-nav-arr"></i> <a href="#" class="title" >工作調研</a> <div class="menu-bg"></div> <ul>
<li> <a href="#" title="審判實務研究">審判實務研究</a> </li>
</ul> </div>
<div class="main-menu "> <i class="icon i-nav-arr"></i> <a href="#" class="title" >法院文化</a> <div class="menu-bg"></div> <ul>
<li> <a href="#" title="法官隨筆">法官隨筆</a> </li>
<li> <a href="#" title="書畫攝影">書畫攝影</a> </li>
<li> <a href="#" title="文化動態">文化動態</a> </li>
</ul> </div>
<div class="main-menu "> <i class="icon i-nav-arr"></i> <a href="#" class="title" >金牛法院</a> <div class="menu-bg"></div> <ul>
<li> <a href="#" title="法院概況">法院概況</a> </li>
<li> <a href="#" title="法院座標">法院座標</a> </li>
</ul> </div>
</div> </div> <!--地圖導航--> <div id="container"></div> <div class="bt"> <input type='text' value='' id="regionText" style="display: none;" /> <input type='text' value="成都法院" id="poiText" placeholder="搜尋地點" /> <input type="button" value="搜尋" onclick="getResult()" />
<div id="pageIndexLabel" style="width: 100px;"></div> </div> <div style='width: 410px;height: 650px;margin: -944px 911px;' id="infoDiv"></div>
<!--友情連結--> <div class="lists"> <a href="http://tingshen.court.gov.cn/">中國庭審公開網</a> <a href="http://www.court.gov.cn/">最高人民法院</a> <a href="http://zxgk.sccourt.gov.cn/webapp/area/scsfgk/index.jsp">四川法院執行公開網</a> <a href="http://www.sccourt.gov.cn/">四川省高階人民法院</a> <a href="http://cdfy.chinacourt.org/index.shtml">成都市中級人民法院</a> <br /> <a href="http://www.whfy.gov.cn/">武侯區人民法院</a> <a href="http://www.cdjnfy.gov.cn/">金牛區人民法院</a> <a href="http://cdchfy.chinacourt.org/index.shtml">成華區人民法院</a> <a href="http://www.qyfy.gov.cn/">青羊區人民法院</a> <a href="http://www.jjfy.gov.cn/">錦江區人民法院</a> <br /> <a href="http://www.xdfy.gov.cn/">新都區人民法院</a> <a href="http://www.lqyfy.gov.cn/">龍泉驛區人民法院</a> <a href="http://tingshen.court.gov.cn/court/3008">青白江區人民法院</a> <a href="">成都溫江區人民法院</a> <a href="http://www.pxfy.org.cn/">成都郫都區人民法院</a> <a href="http://cdgxfy.chinacourt.org/index.shtml">高新區人民法院</a> <a href="http://www.slfy.gov.cn/">雙流區人民法院</a>
</div>
</div> <script> $(function(){ $.Animate(); $.Animate({ type: 'fade', mouseType: 'mouseover', listBox: '#JS_slide_img' }); }); </script> </body>
</html>
效果如下：
