| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460 |
- <html xmlns:th="http://www.thymeleaf.org"
- xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>腾讯地图开放API - 轻快小巧,简单易用!</title>
- <!-- <link rel="stylesheet" href="common.css">-->
- <script type="text/javascript" th:src="@{/js/lib/jquery-1.11.0.min.js}"></script>
- <link rel="stylesheet" href="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.css">
- <link rel="stylesheet" type="text/css" th:href="@{/h-ui/static/h-ui/css/H-ui.min.css}" />
- <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.4/jquery-ui.min.js"></script>
- <script charset="utf-8"
- src="https://map.qq.com/api/js?v=2.exp&key=XQ3BZ-6X2Y6-3HNSL-EDDG3-B2AJQ-6TBIF"></script>
- <script src="https://3gimg.qq.com/lightmap/api_v2/2/4/126/main.js" type="text/javascript"></script>
- <style type="text/css">
- /* start common*/
- body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td {
- margin: 0;
- padding: 0;
- }
- table {
- border-collapse: collapse;
- border-spacing: 0;
- }
- ul, ol {
- list-style: none;
- line-height: 20px;
- }
- ol li {
- list-style: decimal;
- margin-left: 30px;
- }
- fieldset, img {
- border: 0;
- }
- body, button, input, select, textarea {
- font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
- }
- h1, h2, h3, h4, h5, h6 {
- font-size: 100%;
- }
- address, cite, dfn, em, var {
- font-style: normal;
- }
- code, kbd, pre, samp {
- font-family: Consolas, Courier new, Courier, monospace;
- }
- small {
- font-size: 12px;
- }
- sup {
- vertical-align: text-top;
- }
- sub {
- vertical-align: text-bottom;
- }
- a {
- text-decoration: none;
- }
- a:link {
- color: #22659A;
- }
- a:visited {
- color: #22659A;
- }
- a:hover {
- text-decoration: underline;
- }
- a:active {
- }
- /*end common*/
- /*start page*/
- .page {
- width: 910px;
- margin: 0px auto;
- overflow: hidden;
- zoom: 1;
- }
- /*start header*/
- .header {
- overflow: hidden;
- zoom: 1;
- }
- /* start top-menu*/
- .top-menu {
- float: right;
- }
- .top-menu li {
- float: left;
- padding-left: 17px;
- height: 24px;
- line-height: 24px;
- background: url(https://lbs.qq.com/tool/getpoint/img/dot.png) 7px center no-repeat;
- }
- .top-menu li.first {
- background: none;
- }
- .top-menu li a {
- color: #727f97;
- }
- /*end top-menu*/
- /* start banner*/
- .banner {
- clear: both;
- height: 27px;
- padding: 16px 0px 10px 10px;
- }
- /*end banner*/
- /*start nav*/
- .nav {
- height: 32px;
- padding-left: 26px;
- overflow: hidden;
- background: url(https://lbs.qq.com/tool/getpoint/img/nav_bar.png) no-repeat;
- }
- .nav li {
- float: left;
- width: 86px;
- height: 32px;
- font-size: 14px;
- line-height: 32px;
- font-weight: bold;
- text-align: center;
- overflow: hidden;
- }
- .nav li a {
- width: 92px;
- height: 36px;
- line-height: 36px;
- text-align: center;
- }
- .nav a:link, .nav a:visited, .nav a:active {
- color: #FFF;
- }
- .nav li:hover a, .nav a:hover, .nav a.active {
- display: block;
- width: 92px;
- background: url(https://lbs.qq.com/tool/getpoint/img/nav_hover.png) no-repeat;
- text-decoration: none;
- color: #104 !important;
- }
- .new {
- width: 92px !important;
- background: url(https://lbs.qq.com/tool/getpoint/img/new.png) no-repeat 76px 11px;
- }
- /*end nav*/
- /*end header*/
- /*start main*/
- .main {
- margin-top: 20px;
- overflow: hidden;
- zoom: 1;
- }
- .page_left {
- width: 260px;
- margin-right: 10px;
- float: left;
- overflow: hidden;
- zoom: 1;
- }
- .page_right {
- width: 640px;
- overflow: hidden;
- zoom: 1;
- float: left;
- }
- /*end main*/
- /*start footer*/
- .footer {
- padding: 20px 0;
- text-align: center;
- font-size: 12px;
- line-height: 30px;
- overflow: hidden;
- color: #A3A3A3;
- }
- /*end footer*/
- /*end page*/
- * {
- margin: 0px;
- padding: 0px;
- }
- #main {
- height: 553px;
- width: 912px;
- border: 1px solid #5688CB;
- border-top: 0px;
- }
- #tooles {
- height: 23px;
- background: #5688CB;
- position: relative;
- z-index: 100;
- color: white;
- }
- #bside_left {
- width: 260px;
- height: 510px;
- padding: 10px 0px 10px 10px;
- float: left;
- overflow: auto;
- }
- #cur_city, #no_value {
- height: 20px;
- position: absolute;
- top: 3px;
- left: 10px;
- }
- #cur_city .change_city {
- margin-left: 5px;
- cursor: pointer;
- }
- #level {
- margin-left: 20px;
- }
- .logo_img {
- width: 172px;
- height: 23px;
- }
- .search {
- width: 280px;
- height: 53px;
- padding-left: 10px;
- float: left;
- margin-left: 15px;
- margin-right: 30px;
- }
- .search_t {
- /*width: 200px;*/
- /*height: 18px;*/
- padding: 3px;
- margin-top: 13px;
- line-height: 20px;
- }
- .search_c {
- width: 220px;
- height: 40px;
- float: left;
- }
- /*.btn, .btn_active {*/
- /* width: 49px;*/
- /* height: 24px;*/
- /* line-height: 24px;*/
- /* font-size: 14px;*/
- /* float: left;*/
- /* background: url(https://lbs.qq.com/tool/getpoint/img/btn.png);*/
- /* margin-top: 14px;*/
- /* text-align: center;*/
- /* cursor: pointer;*/
- /*}*/
- /*.btn_active {*/
- /* background: url(https://lbs.qq.com/tool/getpoint/img/btn.png) -49px 0px;*/
- /*}*/
- .poi {
- width: 570px;
- height: 41;
- /*padding-top: 13px;*/
- float: left;
- position: relative;
- }
- .poi_note {
- width: 63px;
- line-height: 26px;
- float: left;
- margin-top: 15px;
- }
- #poi_cur {
- width: 160px;
- /*height: 22px;*/
- margin-right: 10px;
- margin-top: 13px;
- line-height: 26px;
- float: left;
- text-align: center;
- }
- #addr_cur {
- width: 260px;
- /*height: 22px;*/
- margin-right: 5px;
- margin-top: 13px;
- line-height: 26px;
- float: left;
- text-align: center;
- }
- .btn_copy {
- width: 49px;
- height: 24px;
- background: url(https://lbs.qq.com/tool/getpoint/img/btn_cpoy.png) 0px 0px;
- float: left;
- }
- .already {
- width: 52px;
- line-height: 26px;
- padding-left: 5px;
- float: left;
- color: red;
- display: none;
- }
- .info_list {
- margin-bottom: 5px;
- cleat: both;
- cursor: pointer;
- }
- #txt_pannel {
- height: 500px;
- }
- #city {
- width: 356px;
- height: 433px;
- padding: 10px;
- border: 2px solid #D6D6D6;
- position: absolute;
- left: 44px;
- top: 20px;
- z-index: 999;
- background: #fff;
- overflow: auto;
- color: black;
- }
- #city .city_class {
- font-size: 12px;
- background: #fff;
- }
- #city .city_container {
- margin-top: 10px;
- margin-bottom: 10px;
- background: #fff;
- }
- #city .city_container_left {
- width: 48px;
- float: left;
- }
- #city .city_container_right {
- width: 289px;
- float: left;
- }
- #city .close {
- width: 20px;
- height: 20px;
- display: inline-block;
- float: right;
- font-size: 20px;
- font-weight: normal;
- cursor: pointer;
- }
- #city .city_name {
- line-height: 20px;
- margin-left: 5px;
- color: #2F82C4;
- cursor: pointer;
- display: inline-block;
- font-size: 12px;
- }
- #curCity {
- margin-right: 5px;
- }
- .hide {
- display: none;
- }
- #bside_rgiht {
- width: 631px;
- height: 530px;
- margin-left: 10px;
- border-left: 1px solid #5688CB;
- float: left;
- font-size: 12px;
- }
- #container {
- width: 621px;
- height: 520px;
- border: 5px solid #fff;
- }
- #no_value {
- color: red;
- position: relative;
- width: 200px;
- }
- </style>
- <style type="text/css">@media screen {
- .smnoscreen {
- display: none
- }
- }
- @media print {
- .smnoprint {
- display: none
- }
- }</style>
- </head>
- <body>
- <div style="position:relative;margin-left:42px;">
- <div style="height:53px;">
- <div class="search">
- <div class="search_c">
- <span role="status" aria-live="polite" class="ui-helper-hidden-accessible"></span>
- <input type="text" class="search_t ui-autocomplete-input input-text"
- onkeypress="if(event.keyCode==13) {btnSearch.click();return false;}" autocomplete="off"></div>
- <div id="btn_search" class="btn btn-primary radius" style="margin-top: 13px">搜索</div>
- </div>
- <div class="poi">
- <div class="poi_note">当前坐标:</div>
- <input disabled type="text" id="poi_cur" class="input-text">
- <div class="poi_note">当前地址:</div>
- <input disabled type="text" id="addr_cur" class="input-text">
- </div>
- </div>
- <div id="main">
- <div id="tooles">
- <div id="cur_city">
- <strong>苏州市</strong><span class="change_city">[<span
- style="text-decoration:underline;">更换城市</span>]<span id="level">当前缩放等级:10</span></span>
- <div id="city" class="hide">
- <h3 class="city_class">热门城市<span class="close">X</span></h3>
- <div class="city_container">
- <span class="city_name">北京</span>
- <span class="city_name">深圳</span>
- <span class="city_name">上海</span>
- <span class="city_name">香港</span>
- <span class="city_name">澳门</span>
- <span class="city_name">广州</span>
- <span class="city_name">天津</span>
- <span class="city_name">重庆</span>
- <span class="city_name">杭州</span>
- <span class="city_name">成都</span>
- <span class="city_name">武汉</span>
- <span class="city_name">青岛</span>
- </div>
- <h3 class="city_class">全国城市</h3>
- <div class="city_container">
- <div class="city_container_left">直辖市</div>
- <div class="city_container_right">
- <span class="city_name">北京</span>
- <span class="city_name">上海</span>
- <span class="city_name">天津</span>
- <span class="city_name">重庆</span>
- </div>
- </div>
- <div style="clear:both"></div>
- <div class="city_container">
- <div class="city_container_left"><span class="style_color">内蒙古</span></div>
- <div class="city_container_right">
- <span class="city_name">呼和浩特</span>
- <span class="city_name">包头</span>
- <span class="city_name">乌海</span>
- <span class="city_name">赤峰</span>
- <span class="city_name">通辽</span>
- <span class="city_name">鄂尔多斯</span>
- <span class="city_name">呼伦贝尔</span>
- <span class="city_name">巴彦淖尔</span>
- <span class="city_name">乌兰察布</span>
- <span class="city_name">兴安盟</span>
- <span class="city_name">锡林郭勒盟</span>
- <span class="city_name">阿拉善盟</span>
- </div>
- </div>
- <div style="clear:both"></div>
- <div class="city_container">
- <div class="city_container_left"><span class="style_color">山西</span></div>
- <div class="city_container_right">
- <span class="city_name">太原</span>
- <span class="city_name">大同</span>
- <span class="city_name">阳泉</span>
- <span class="city_name">长治</span>
- <span class="city_name">晋城</span>
- <span class="city_name">朔州</span>
- <span class="city_name">晋中</span>
- <span class="city_name">运城</span>
- <span class="city_name">忻州</span>
- <span class="city_name">临汾</span>
- <span class="city_name">吕梁</span>
- </div>
- </div>
- <div style="clear:both"></div>
- <div class="city_container">
- <div class="city_container_left"><span class="style_color">陕西</span></div>
- <div class="city_container_right">
- <span class="city_name">西安</span>
- <span class="city_name">铜川</span>
- <span class="city_name">宝鸡</span>
- <span class="city_name">咸阳</span>
- <span class="city_name">渭南</span>
- <span class="city_name">延安</span>
- <span class="city_name">汉中</span>
- <span class="city_name">榆林</span>
- <span class="city_name">安康</span>
- <span class="city_name">商洛</span>
- </div>
- </div>
- <div style="clear:both"></div>
- <div class="city_container">
- <div class="city_container_left"><span class="style_color">河北</span></div>
- <div class="city_container_right">
- <span class="city_name">石家庄</span>
- <span class="city_name">唐山</span>
- <span class="city_name">秦皇岛</span>
- <span class="city_name">邯郸</span>
- <span class="city_name">邢台</span>
- <span class="city_name">保定</span>
- <span class="city_name">张家口</span>
- <span class="city_name">承德</span>
- <span class="city_name">沧州</span>
- <span class="city_name">廊坊</span>
- <span class="city_name">衡水</span>
- </div>
- </div>
- <div style="clear:both"></div>
- <div class="city_container">
- <div class="city_container_left"><span class="style_color">辽宁</span></div>
- <div class="city_container_right">
- <span class="city_name">沈阳</span>
- <span class="city_name">大连</span>
- <span class="city_name">鞍山</span>
- <span class="city_name">抚顺</span>
- <span class="city_name">本溪</span>
- <span class="city_name">丹东</span>
- <span class="city_name">锦州</span>
- <span class="city_name">营口</span>
- <span class="city_name">阜新</span>
- <span class="city_name">辽阳</span>
- <span class="city_name">盘锦</span>
- <span class="city_name">铁岭</span>
- <span class="city_name">朝阳</span>
- <span class="city_name">葫芦岛</span>
- </div>
- </div>
- <div style="clear:both"></div>
- <div class="city_container">
- <div class="city_container_left"><span class="style_color">吉林</span></div>
- <div class="city_container_right">
- <span class="city_name">长春</span>
- <span class="city_name">吉林市</span>
- <span class="city_name">四平</span>
- <span class="city_name">辽源</span>
- <span class="city_name">通化</span>
- <span class="city_name">白山</span>
- <span class="city_name">松原</span>
- <span class="city_name">白城</span>
- <span class="city_name">延边</span>
- </div>
- </div>
- <div style="clear:both"></div>
- <div class="city_container">
- <div class="city_container_left"><span class="style_color">黑龙江</span></div>
- <div class="city_container_right">
- <span class="city_name">哈尔滨</span>
- <span class="city_name">齐齐哈尔</span>
- <span class="city_name">鸡西</span>
- <span class="city_name">鹤岗</span>
- <span class="city_name">双鸭山</span>
- <span class="city_name">大庆</span>
- <span class="city_name">伊春</span>
- <span class="city_name">牡丹江</span>
- <span class="city_name">佳木斯</span>
- <span class="city_name">七台河</span>
- <span class="city_name">黑河</span>
- <span class="city_name">绥化</span>
- <span class="city_name">大兴安岭</span>
- </div>
- </div>
- <div style="clear:both"></div>
- <div class="city_container">
- <div class="city_container_left"><span class="style_color">江苏</span></div>
- <div class="city_container_right">
- <span class="city_name">南京</span>
- <span class="city_name">无锡</span>
- <span class="city_name">徐州</span>
- <span class="city_name">常州</span>
- <span class="city_name">苏州</span>
- <span class="city_name">南通</span>
- <span class="city_name">连云港</span>
- <span class="city_name">淮安</span>
- <span class="city_name">盐城</span>
- <span class="city_name">扬州</span>
- <span class="city_name">镇江</span>
- <span class="city_name">泰州</span>
- <span class="city_name">宿迁</span>
- </div>
- </div>
- <div style="clear:both"></div>
- <div class="city_container">
- <div class="city_container_left"><span class="style_color">安徽</span></div>
- <div class="city_container_right">
- <span class="city_name">合肥</span>
- <span class="city_name">蚌埠</span>
- <span class="city_name">芜湖</span>
- <span class="city_name">淮南</span>
- <span class="city_name">马鞍山</span>
- <span class="city_name">淮北</span>
- <span class="city_name">铜陵</span>
- <span class="city_name">安庆</span>
- <span class="city_name">黄山</span>
- <span class="city_name">阜阳</span>
- <span class="city_name">宿州</span>
- <span class="city_name">滁州</span>
- <span class="city_name">六安</span>
- <span class="city_name">宣城</span>
- <span class="city_name">池州</span>
- <span class="city_name">亳州</span>
- </div>
- </div>
- <div style="clear:both"></div>
- <div class="city_container">
- <div class="city_container_left"><span class="style_color">山东</span></div>
- <div class="city_container_right">
- <span class="city_name">济南</span>
- <span class="city_name">青岛</span>
- <span class="city_name">淄博</span>
- <span class="city_name">枣庄</span>
- <span class="city_name">东营</span>
- <span class="city_name">潍坊</span>
- <span class="city_name">烟台</span>
- <span class="city_name">威海</span>
- <span class="city_name">济宁</span>
- <span class="city_name">泰安</span>
- <span class="city_name">日照</span>
- <span class="city_name">临沂</span>
- <span class="city_name">德州</span>
- <span class="city_name">聊城</span>
- <span class="city_name">滨州</span>
- <span class="city_name">菏泽</span>
- </div>
- </div>
- <div style="clear:both"></div>
- <div class="city_container">
- <div class="city_container_left"><span class="style_color">浙江</span></div>
- <div class="city_container_right">
- <span class="city_name">杭州</span>
- <span class="city_name">宁波</span>
- <span class="city_name">温州</span>
- <span class="city_name">嘉兴</span>
- <span class="city_name">绍兴</span>
- <span class="city_name">金华</span>
- <span class="city_name">衢州</span>
- <span class="city_name">舟山</span>
- <span class="city_name">台州</span>
- <span class="city_name">丽水</span>
- <span class="city_name">湖州</span>
- </div>
- </div>
- <div style="clear:both"></div>
- <div class="city_container">
- <div class="city_container_left"><span class="style_color">江西</span></div>
- <div class="city_container_right">
- <span class="city_name">南昌</span>
- <span class="city_name">景德镇</span>
- <span class="city_name">萍乡</span>
- <span class="city_name">九江</span>
- <span class="city_name">新余</span>
- <span class="city_name">鹰潭</span>
- <span class="city_name">赣州</span>
- <span class="city_name">吉安</span>
- <span class="city_name">宜春</span>
- <span class="city_name">抚州</span>
- <span class="city_name">上饶</span>
- </div>
- </div>
- <div style="clear:both"></div>
- <div class="city_container">
- <div class="city_container_left"><span class="style_color">福建</span></div>
- <div class="city_container_right">
- <span class="city_name">福州</span>
- <span class="city_name">厦门</span>
- <span class="city_name">莆田</span>
- <span class="city_name">三明</span>
- <span class="city_name">泉州</span>
- <span class="city_name">漳州</span>
- <span class="city_name">南平</span>
- <span class="city_name">龙岩</span>
- <span class="city_name">宁德</span>
- </div>
- </div>
- <div style="clear:both"></div>
- <div class="city_container">
- <div class="city_container_left"><span class="style_color">湖南</span></div>
- <div class="city_container_right">
- <span class="city_name">长沙</span>
- <span class="city_name">株洲</span>
- <span class="city_name">湘潭</span>
- <span class="city_name">衡阳</span>
- <span class="city_name">邵阳</span>
- <span class="city_name">岳阳</span>
- <span class="city_name">常德</span>
- <span class="city_name">张家界</span>
- <span class="city_name">益阳</span>
- <span class="city_name">郴州</span>
- <span class="city_name">永州</span>
- <span class="city_name">怀化</span>
- <span class="city_name">娄底</span>
- <span class="city_name">湘西</span>
- </div>
- </div>
- <div style="clear:both"></div>
- <div class="city_container">
- <div class="city_container_left"><span class="style_color">湖北</span></div>
- <div class="city_container_right">
- <span class="city_name">武汉</span>
- <span class="city_name">黄石</span>
- <span class="city_name">襄阳</span>
- <span class="city_name">十堰</span>
- <span class="city_name">宜昌</span>
- <span class="city_name">荆门</span>
- <span class="city_name">鄂州</span>
- <span class="city_name">孝感</span>
- <span class="city_name">荆州</span>
- <span class="city_name">黄冈</span>
- <span class="city_name">咸宁</span>
- <span class="city_name">随州</span>
- <span class="city_name">恩施</span>
- <span class="city_name">潜江</span>
- <span class="city_name">仙桃</span>
- <span class="city_name">天门</span>
- <span class="city_name">神农架</span>
- </div>
- </div>
- <div style="clear:both"></div>
- <div class="city_container">
- <div class="city_container_left"><span class="style_color">河南</span></div>
- <div class="city_container_right">
- <span class="city_name">郑州</span>
- <span class="city_name">开封</span>
- <span class="city_name">洛阳</span>
- <span class="city_name">平顶山</span>
- <span class="city_name">焦作</span>
- <span class="city_name">鹤壁</span>
- <span class="city_name">新乡</span>
- <span class="city_name">安阳</span>
- <span class="city_name">濮阳</span>
- <span class="city_name">许昌</span>
- <span class="city_name">漯河</span>
- <span class="city_name">三门峡</span>
- <span class="city_name">南阳</span>
- <span class="city_name">商丘</span>
- <span class="city_name">信阳</span>
- <span class="city_name">周口</span>
- <span class="city_name">驻马店</span>
- <span class="city_name">济源</span>
- </div>
- </div>
- <div style="clear:both"></div>
- <div class="city_container">
- <div class="city_container_left"><span class="style_color">海南</span></div>
- <div class="city_container_right">
- <span class="city_name">海口</span>
- <span class="city_name">三亚</span>
- <span class="city_name">三沙</span>
- <span class="city_name">儋州</span>
- <span class="city_name">五指山</span>
- <span class="city_name">文昌</span>
- <span class="city_name">琼海</span>
- <span class="city_name">万宁</span>
- <span class="city_name">东方</span>
- <span class="city_name">定安</span>
- <span class="city_name">屯昌</span>
- <span class="city_name">澄迈</span>
- <span class="city_name">临高</span>
- <span class="city_name">白沙</span>
- <span class="city_name">昌江</span>
- <span class="city_name">乐东</span>
- <span class="city_name">陵水</span>
- <span class="city_name">保亭</span>
- <span class="city_name">琼中</span>
- </div>
- </div>
- <div style="clear:both"></div>
- <div class="city_container">
- <div class="city_container_left"><span class="style_color">广东</span></div>
- <div class="city_container_right">
- <span class="city_name">广州</span>
- <span class="city_name">深圳</span>
- <span class="city_name">珠海</span>
- <span class="city_name">汕头</span>
- <span class="city_name">韶关</span>
- <span class="city_name">佛山</span>
- <span class="city_name">江门</span>
- <span class="city_name">湛江</span>
- <span class="city_name">茂名</span>
- <span class="city_name">肇庆</span>
- <span class="city_name">惠州</span>
- <span class="city_name">梅州</span>
- <span class="city_name">汕尾</span>
- <span class="city_name">河源</span>
- <span class="city_name">阳江</span>
- <span class="city_name">清远</span>
- <span class="city_name">东莞</span>
- <span class="city_name">中山</span>
- <span class="city_name">潮州</span>
- <span class="city_name">揭阳</span>
- <span class="city_name">云浮</span>
- </div>
- </div>
- <div style="clear:both"></div>
- <div class="city_container">
- <div class="city_container_left"><span class="style_color">广西</span></div>
- <div class="city_container_right">
- <span class="city_name">南宁</span>
- <span class="city_name">柳州</span>
- <span class="city_name">桂林</span>
- <span class="city_name">梧州</span>
- <span class="city_name">北海</span>
- <span class="city_name">防城港</span>
- <span class="city_name">钦州</span>
- <span class="city_name">贵港</span>
- <span class="city_name">玉林</span>
- <span class="city_name">百色</span>
- <span class="city_name">贺州</span>
- <span class="city_name">河池</span>
- <span class="city_name">来宾</span>
- <span class="city_name">崇左</span>
- </div>
- </div>
- <div style="clear:both"></div>
- <div class="city_container">
- <div class="city_container_left"><span class="style_color">贵州</span></div>
- <div class="city_container_right">
- <span class="city_name">贵阳</span>
- <span class="city_name">遵义</span>
- <span class="city_name">安顺</span>
- <span class="city_name">铜仁</span>
- <span class="city_name">毕节</span>
- <span class="city_name">六盘水</span>
- <span class="city_name">黔西南</span>
- <span class="city_name">黔东南</span>
- <span class="city_name">黔南</span>
- </div>
- </div>
- <div style="clear:both"></div>
- <div class="city_container">
- <div class="city_container_left"><span class="style_color">四川</span></div>
- <div class="city_container_right">
- <span class="city_name">成都</span>
- <span class="city_name">自贡</span>
- <span class="city_name">攀枝花</span>
- <span class="city_name">泸州</span>
- <span class="city_name">德阳</span>
- <span class="city_name">绵阳</span>
- <span class="city_name">广元</span>
- <span class="city_name">遂宁</span>
- <span class="city_name">内江</span>
- <span class="city_name">乐山</span>
- <span class="city_name">南充</span>
- <span class="city_name">宜宾</span>
- <span class="city_name">广安</span>
- <span class="city_name">达州</span>
- <span class="city_name">眉山</span>
- <span class="city_name">雅安</span>
- <span class="city_name">巴中</span>
- <span class="city_name">资阳</span>
- <span class="city_name">阿坝</span>
- <span class="city_name">甘孜</span>
- <span class="city_name">凉山</span>
- </div>
- </div>
- <div style="clear:both"></div>
- <div class="city_container">
- <div class="city_container_left"><span class="style_color">云南</span></div>
- <div class="city_container_right">
- <span class="city_name">昆明</span>
- <span class="city_name">保山</span>
- <span class="city_name">昭通</span>
- <span class="city_name">丽江</span>
- <span class="city_name">普洱</span>
- <span class="city_name">临沧</span>
- <span class="city_name">曲靖</span>
- <span class="city_name">玉溪</span>
- <span class="city_name">文山</span>
- <span class="city_name">西双版纳</span>
- <span class="city_name">楚雄</span>
- <span class="city_name">红河</span>
- <span class="city_name">德宏</span>
- <span class="city_name">大理</span>
- <span class="city_name">怒江</span>
- <span class="city_name">迪庆</span>
- </div>
- </div>
- <div style="clear:both"></div>
- <div class="city_container">
- <div class="city_container_left"><span class="style_color">甘肃</span></div>
- <div class="city_container_right">
- <span class="city_name">兰州</span>
- <span class="city_name">嘉峪关</span>
- <span class="city_name">金昌</span>
- <span class="city_name">白银</span>
- <span class="city_name">天水</span>
- <span class="city_name">酒泉</span>
- <span class="city_name">张掖</span>
- <span class="city_name">武威</span>
- <span class="city_name">定西</span>
- <span class="city_name">陇南</span>
- <span class="city_name">平凉</span>
- <span class="city_name">庆阳</span>
- <span class="city_name">临夏</span>
- <span class="city_name">甘南</span>
- </div>
- </div>
- <div style="clear:both"></div>
- <div class="city_container">
- <div class="city_container_left"><span class="style_color">宁夏</span></div>
- <div class="city_container_right">
- <span class="city_name">银川</span>
- <span class="city_name">石嘴山</span>
- <span class="city_name">吴忠</span>
- <span class="city_name">固原</span>
- <span class="city_name">中卫</span>
- </div>
- </div>
- <div style="clear:both"></div>
- <div class="city_container">
- <div class="city_container_left"><span class="style_color">青海</span></div>
- <div class="city_container_right">
- <span class="city_name">西宁</span>
- <span class="city_name">玉树</span>
- <span class="city_name">果洛</span>
- <span class="city_name">海东</span>
- <span class="city_name">海西</span>
- <span class="city_name">黄南</span>
- <span class="city_name">海北</span>
- <span class="city_name">海南</span>
- </div>
- </div>
- <div style="clear:both"></div>
- <div class="city_container">
- <div class="city_container_left"><span class="style_color">西藏</span></div>
- <div class="city_container_right">
- <span class="city_name">拉萨</span>
- <span class="city_name">那曲</span>
- <span class="city_name">昌都</span>
- <span class="city_name">山南</span>
- <span class="city_name">日喀则</span>
- <span class="city_name">阿里</span>
- <span class="city_name">林芝</span>
- </div>
- </div>
- <div style="clear:both"></div>
- <div class="city_container">
- <div class="city_container_left"><span class="style_color">新疆</span></div>
- <div class="city_container_right">
- <span class="city_name">乌鲁木齐</span>
- <span class="city_name">克拉玛依</span>
- <span class="city_name">吐鲁番</span>
- <span class="city_name">哈密</span>
- <span class="city_name">博尔塔拉</span>
- <span class="city_name">巴音郭楞</span>
- <span class="city_name">克孜勒苏</span>
- <span class="city_name">和田</span>
- <span class="city_name">阿克苏</span>
- <span class="city_name">喀什</span>
- <span class="city_name">塔城</span>
- <span class="city_name">伊犁</span>
- <span class="city_name">昌吉</span>
- <span class="city_name">阿勒泰</span>
- <span class="city_name">石河子</span>
- <span class="city_name">阿拉尔</span>
- <span class="city_name">图木舒克</span>
- <span class="city_name">五家渠</span>
- <span class="city_name">北屯</span>
- <span class="city_name">铁门关</span>
- <span class="city_name">双河</span>
- <span class="city_name">可克达拉</span>
- <span class="city_name">昆玉</span>
- </div>
- </div>
- <div style="clear:both"></div>
- </div>
- </div>
- </div>
- <div id="bside_left">
- <div id="txt_pannel">
- <!-- <h3>功能简介:</h3>-->
- <!-- <p>1、支持地址 精确/模糊 查询;</p>-->
- <!-- <p>2、支持POI点坐标显示;</p>-->
- <!-- <p>3、坐标鼠标跟随显示;</p>-->
- <!-- <h3>使用说明:</h3>-->
- <!-- <p>在搜索框搜索关键词后,地图上会显示相应poi点,同时左侧显示对应该点的信息,点击某点或某信息,右上角会显示相应该点的坐标和地址。</p>-->
- </div>
- </div>
- <div id="bside_rgiht">
- <div id="container"
- style="position: relative; background-color: rgb(229, 227, 223); overflow: hidden; transform: translateZ(0px);">
- </div>
- </div>
- <div class="row" style="margin-top: 540px; text-align: center;">
- <button onclick="saveItems();" class="btn btn-primary radius">保存</button>
- <button onclick="removeIframe();" class="btn btn-default radius">取消</button>
- </div>
- </div>
- </div>
- <script type="text/javascript">
- var container = document.getElementById("container");
- var center
- var map = new qq.maps.Map(container, {
- zoom: 12
- }),
- label = new qq.maps.Label({
- map: map,
- offset: new qq.maps.Size(15, -12),
- draggable: false,
- clickable: false
- }),
- markerArray = [],
- curCity = document.getElementById("cur_city"),
- btnSearch = document.getElementById("btn_search"),
- bside = document.getElementById("bside_left"),
- url, query_city,
- cityservice = new qq.maps.CityService({
- complete: function (result) {
- if (parent.$("#lat_lng").val() != null && parent.$("#lat_lng").val() != "") {
- latLngString = parent.$("#lat_lng").val();
- center = new qq.maps.LatLng(Number(latLngString.split(",")[0]), Number(latLngString.split(",")[1]));
- document.getElementById("poi_cur").value = latLngString;
- url3 = encodeURI("https://apis.map.qq.com/ws/geocoder/v1/?location=" + latLngString.split(",")[0] + "," + latLngString.split(",")[1] + "&key=XQ3BZ-6X2Y6-3HNSL-EDDG3-B2AJQ-6TBIF&output=jsonp&&callback=?");
- $.getJSON(url3, function (result) {
- if (result.result != undefined) {
- document.getElementById("addr_cur").value = result.result.address;
- } else {
- document.getElementById("addr_cur").value = "";
- }
- })
- } else {
- center = result.detail.latLng;
- }
- curCity.children[0].innerHTML = result.detail.name;
- map.setCenter(center);
- }
- });
- cityservice.searchLocalCity();
- //添加定时器
- map.setOptions({
- draggableCursor: "crosshair"
- });
- $(container).mouseenter(function () {
- label.setMap(map);
- });
- $(container).mouseleave(function () {
- label.setMap(null);
- });
- qq.maps.event.addListener(map, "mousemove", function (e) {
- var latlng = e.latLng;
- label.setPosition(latlng);
- label.setContent(latlng.getLat().toFixed(6) + "," + latlng.getLng().toFixed(6));
- });
- //添加定时器
- setTimeout(function () {
- var marker_0 = new qq.maps.Marker({
- position: center,
- animation: qq.maps.MarkerAnimation.DROP,
- map: map
- });
- qq.maps.event.addListener(map, 'click', function (event) {
- marker_0.setMap(null);
- });
- //marker.setAnimation(qq.maps.Animation.DROP);
- }, 2000);
- //添加监听事件 获取鼠标单击事件
- qq.maps.event.addListener(map, 'click', function (event) {
- var marker = new qq.maps.Marker({
- position: event.latLng,
- map: map
- });
- qq.maps.event.addListener(map, 'click', function (event) {
- marker.setMap(null);
- });
- });
- var url3;
- qq.maps.event.addListener(map, "click", function (e) {
- document.getElementById("poi_cur").value = e.latLng.getLat().toFixed(6) + "," + e.latLng.getLng().toFixed(6);
- url3 = encodeURI("https://apis.map.qq.com/ws/geocoder/v1/?location=" + e.latLng.getLat() + "," + e.latLng.getLng() + "&key=XQ3BZ-6X2Y6-3HNSL-EDDG3-B2AJQ-6TBIF&output=jsonp&&callback=?");
- $.getJSON(url3, function (result) {
- if (result.result != undefined) {
- document.getElementById("addr_cur").value = result.result.address;
- } else {
- document.getElementById("addr_cur").value = "";
- }
- })
- });
- qq.maps.event.addListener(map, "zoom_changed", function () {
- document.getElementById("level").innerHTML = "当前缩放等级:" + map.getZoom();
- });
- var listener_arr = [];
- var isNoValue = false;
- qq.maps.event.addDomListener(btnSearch, 'click', function () {
- var value = this.parentNode.getElementsByTagName("input")[0].value;
- var latlngBounds = new qq.maps.LatLngBounds();
- for (var i = 0, l = listener_arr.length; i < l; i++) {
- qq.maps.event.removeListener(listener_arr[i]);
- }
- listener_arr.length = 0;
- query_city = curCity.children[0].innerHTML;
- url = encodeURI("https://apis.map.qq.com/ws/place/v1/search?keyword=" + value + "&boundary=region(" + query_city + ",0)&page_size=9&page_index=1&key=XQ3BZ-6X2Y6-3HNSL-EDDG3-B2AJQ-6TBIF&output=jsonp&&callback=?");
- $.getJSON(url, function (result) {
- if (result.count) {
- isNoValue = false;
- bside.innerHTML = "";
- each(markerArray, function (n, ele) {
- ele.setMap(null);
- });
- markerArray.length = 0;
- each(result.data, function (n, ele) {
- var latlng = new qq.maps.LatLng(ele.location.lat, ele.location.lng);
- latlngBounds.extend(latlng);
- var left = n * 27;
- var marker = new qq.maps.Marker({
- map: map,
- position: latlng,
- zIndex: 10
- });
- marker.index = n;
- marker.isClicked = false;
- setAnchor(marker, true);
- markerArray.push(marker);
- var listener1 = qq.maps.event.addDomListener(marker, "mouseover", function () {
- var n = this.index;
- setCurrent(markerArray, n, false);
- setCurrent(markerArray, n, true);
- label.setContent(this.position.getLat().toFixed(6) + "," + this.position.getLng().toFixed(6));
- label.setPosition(this.position);
- label.setOptions({
- offset: new qq.maps.Size(15, -20)
- })
- });
- listener_arr.push(listener1);
- var listener2 = qq.maps.event.addDomListener(marker, "mouseout", function () {
- var n = this.index;
- setCurrent(markerArray, n, false);
- setCurrent(markerArray, n, true);
- label.setOptions({
- offset: new qq.maps.Size(15, -12)
- })
- });
- listener_arr.push(listener2);
- var listener3 = qq.maps.event.addDomListener(marker, "click", function () {
- var n = this.index;
- setFlagClicked(markerArray, n);
- setCurrent(markerArray, n, false);
- setCurrent(markerArray, n, true);
- document.getElementById("addr_cur").value = bside.childNodes[n].childNodes[1].childNodes[1].innerHTML.substring(3);
- });
- listener_arr.push(listener3);
- map.fitBounds(latlngBounds);
- var div = document.createElement("div");
- div.className = "info_list";
- var order = document.createElement("div");
- var leftn = -54 - 17 * n;
- order.style.cssText = "width:17px;height:17px;margin:3px 3px 0px 0px;float:left;background:url(https://lbs.qq.com/tool/getpoint/img/marker_n.png) " + leftn + "px 0px";
- div.appendChild(order);
- var pannel = document.createElement("div");
- pannel.style.cssText = "width:200px;float:left;";
- div.appendChild(pannel);
- var name = document.createElement("p");
- name.style.cssText = "margin:0px;color:#0000CC";
- name.innerHTML = ele.title;
- pannel.appendChild(name);
- var address = document.createElement("p");
- address.style.cssText = "margin:0px;";
- address.innerHTML = "地址:" + ele.address;
- pannel.appendChild(address);
- if (ele.tel != undefined) {
- var phone = document.createElement("p");
- phone.style.cssText = "margin:0px;";
- phone.innerHTML = "电话:" + ele.tel;
- pannel.appendChild(phone);
- }
- var position = document.createElement("p");
- position.style.cssText = "margin:0px;";
- position.innerHTML = "坐标:" + ele.location.lat.toFixed(6) + "," + ele.location.lng.toFixed(6);
- pannel.appendChild(position);
- bside.appendChild(div);
- console.log("pannel.offsetHeight", pannel.offsetHeight)
- div.style.height = pannel.offsetHeight + "px";
- div.isClicked = false;
- div.index = n;
- marker.div = div;
- div.marker = marker;
- });
- $("#bside_left").delegate(".info_list", "mouseover", function (e) {
- var n = this.index;
- setCurrent(markerArray, n, false);
- setCurrent(markerArray, n, true);
- });
- $("#bside_left").delegate(".info_list", "mouseout", function () {
- each(markerArray, function (n, ele) {
- if (!ele.isClicked) {
- setAnchor(ele, true);
- ele.div.style.background = "#fff";
- }
- })
- });
- $("#bside_left").delegate(".info_list", "click", function (e) {
- var n = this.index;
- setFlagClicked(markerArray, n);
- setCurrent(markerArray, n, false);
- setCurrent(markerArray, n, true);
- map.setCenter(markerArray[n].position);
- document.getElementById("addr_cur").value = this.childNodes[1].childNodes[1].innerHTML.substring(3);
- });
- } else {
- bside.innerHTML = "";
- each(markerArray, function (n, ele) {
- ele.setMap(null);
- });
- markerArray.length = 0;
- var novalue = document.createElement('div');
- novalue.id = "no_value";
- novalue.innerHTML = "对不起,没有搜索到您要找的结果!";
- bside.appendChild(novalue);
- isNoValue = true;
- }
- });
- });
- btnSearch.onmousedown = function () {
- this.className = "btn_active";
- };
- btnSearch.onmouseup = function () {
- this.className = "btn";
- };
- function setAnchor(marker, flag) {
- var left = marker.index * 27;
- if (flag == true) {
- var anchor = new qq.maps.Point(10, 30),
- origin = new qq.maps.Point(left, 0),
- size = new qq.maps.Size(27, 33),
- icon = new qq.maps.MarkerImage("https://lbs.qq.com/tool/getpoint/img/marker10.png", size, origin, anchor);
- marker.setIcon(icon);
- } else {
- var anchor = new qq.maps.Point(10, 30),
- origin = new qq.maps.Point(left, 35),
- size = new qq.maps.Size(27, 33),
- icon = new qq.maps.MarkerImage("https://lbs.qq.com/tool/getpoint/img/marker10.png", size, origin, anchor);
- marker.setIcon(icon);
- }
- }
- function setCurrent(arr, index, isMarker) {
- if (isMarker) {
- each(markerArray, function (n, ele) {
- if (n == index) {
- setAnchor(ele, false);
- ele.setZIndex(10);
- } else {
- if (!ele.isClicked) {
- setAnchor(ele, true);
- ele.setZIndex(9);
- }
- }
- });
- } else {
- each(markerArray, function (n, ele) {
- if (n == index) {
- ele.div.style.background = "#DBE4F2";
- } else {
- if (!ele.div.isClicked) {
- ele.div.style.background = "#fff";
- }
- }
- });
- }
- }
- function setFlagClicked(arr, index) {
- each(markerArray, function (n, ele) {
- if (n == index) {
- ele.isClicked = true;
- ele.div.isClicked = true;
- var str = '<div style="width:250px;">' + ele.div.children[1].innerHTML.toString() + '</div>';
- var latLng = ele.getPosition();
- document.getElementById("poi_cur").value = latLng.getLat().toFixed(6) + "," + latLng.getLng().toFixed(6);
- } else {
- ele.isClicked = false;
- ele.div.isClicked = false;
- }
- });
- }
- var city = document.getElementById("city");
- curCity.onclick = function (e) {
- var e = e || window.event,
- target = e.target || e.srcElement;
- if (target.innerHTML == "更换城市") {
- city.style.display = "block";
- if (isNoValue) {
- bside.innerHTML = "";
- each(markerArray, function (n, ele) {
- ele.setMap(null);
- });
- markerArray.length = 0;
- }
- }
- };
- var url2;
- city.onclick = function (e) {
- var e = e || window.event,
- target = e.target || e.srcElement;
- if (target.className == "close") {
- city.style.display = "none";
- }
- if (target.className == "city_name") {
- curCity.children[0].innerHTML = target.innerHTML;
- url2 = encodeURI("https://apis.map.qq.com/ws/geocoder/v1/?region=" + curCity.children[0].innerHTML + "&address=" + curCity.children[0].innerHTML + "&key=XQ3BZ-6X2Y6-3HNSL-EDDG3-B2AJQ-6TBIF&output=jsonp&&callback=?");
- $.getJSON(url2, function (result) {
- map.setCenter(new qq.maps.LatLng(result.result.location.lat, result.result.location.lng));
- map.setZoom(10);
- });
- city.style.display = "none";
- }
- };
- var url4;
- $(".search_t").autocomplete({
- source: function (request, response) {
- url4 = encodeURI("https://apis.map.qq.com/ws/place/v1/suggestion/?keyword=" + request.term + "®ion=" + curCity.children[0].innerHTML + "&key=XQ3BZ-6X2Y6-3HNSL-EDDG3-B2AJQ-6TBIF&output=jsonp&&callback=?");
- $.getJSON(url4, function (result) {
- response($.map(result.data, function (item) {
- return ({
- label: item.title
- })
- }));
- });
- }
- });
- function each(obj, fn) {
- for (var n = 0, l = obj.length; n < l; n++) {
- fn.call(obj[n], n, obj[n]);
- }
- }
- /**
- * 保存
- */
- function saveItems() {
- parent.$("#activity_location").val($("#addr_cur").val());
- parent.$("#lat_lng").val($("#poi_cur").val());
- var index = parent.layer.getFrameIndex(window.name);
- parent.layer.close(index);
- }
- /**
- * 取消
- */
- function removeIframe() {
- var index = parent.layer.getFrameIndex(window.name);
- parent.layer.close(index);
- }
- </script>
- <ul class="ui-autocomplete ui-front ui-menu ui-widget ui-widget-content ui-corner-all" id="ui-id-1" tabindex="0"
- style="display: none;">
- </ul>
- </body>
- </html>
|