高德地图根据关键词坐标拾取小工具_html/css_WEB-ITnose
今天早上在写代码的时候，需要用到地图坐标拾取工具，我们用的是搞的地图，在高德地图API官方网站中没有找到相关的坐标拾取工具。在网上找到这么个小工具，与大家分享下！
CSS
1 html { background-color: #fff; } 2 body, div, h1, h2, h3, h4, ul, li, form, input, dl, dt, dd, p { margin: 0; padding: 0; font-family: 微软雅黑; } 3 h3 { +font-size:14px; _font-size: 14px; } 4 img { border: none; } 5 .c { clear: both; } 6 ul, ol, li { list-style: none; } 7 .clearfix:after { content: "."; visibility: hidden; display: block; height: 0; overflow: hidden; clear: both; } 8 * html .clearfix { height: 1%; } 9 * + html .clearfix { height: 1%; }10 body { font: 12px/1.5em 微软雅黑,Arial,Verdana,Helvetica,sans-serif; color: #333; }11 button, input, select, textarea { color: #999; }12 input[type="button"] { padding: 0 5px; color: #333; }13 .demo_box { width: 360px; }14 #iCenter { width: 100%; height: 100%; border: 1px solid #F6F6F6; }15 #r_title { line-height: 28px; padding-left: 5px; background-color: #D1EEEE; font-weight: bold; }16 #result { overflow: auto; margin-bottom: 5px; /* width:661px;*/ height: 500px; }17 #result .sub_result { font-size: 12px; cursor: pointer; line-height: 20px; /*padding:0px 0 4px 2px;*/ border-bottom: 1px solid #C1FFC1; }18 #result .sub_result .detail { }19 #result .sub_result .detail h3 { color: #00A6AC; }20 a { color: #067EC0; text-decoration: none; }21 a:hover { text-decoration: underline; }22 .note { color: #999; }23 div.change { background-image: url(http://pages.haozu.ajkcdn.com/20110909/img/map/marker-h.png); }24 div.change div { background-image: url(http://pages.haozu.ajkcdn.com/20110909/img/map/marker-h-l.gif); }25 .markerContentStyle { position: relative; }26 .markerContentStyle span { background-color: #FFFFFF; color: #FF1493; width: 120px; heigth: 80px; border: 2px solid #D8BFD8; FONT-FAMILY: 华文行楷; position: absolute; top: -10px; left: 25px; white-space: nowrap -webkit-border-radius:5px; border-radius: 5px; }27 div.info { position: relative; z-index: 100; border: 1px solid #BCBCBC; box-shadow: 0 0 10px #B7B6B6; border-radius: 8px; background: rgb(255,255,255); /* The Fallback */ background-color: rgba(255,255,255,0.9); transition-duration: 0.25s; }28 div.info:hover { box-shadow: 0px 0px 15px #0CF; }29 div.info-top { position: relative; background: none repeat scroll 0 0 #F9F9F9; border-bottom: 1px solid #CCC; border-radius: 5px 5px 0 0; }30 div.info-top div { display: inline-block; color: #333333; font-size: 14px; font-weight: bold; line-height: 31px; padding: 0 10px; }31 div.info-top img { position: absolute; top: 10px; right: 10px; transition-duration: 0.25s; }32 div.info-top img:hover { box-shadow: 0px 0px 5px #000; }33 div.info-middle { font-size: 12px; padding: 10px; line-height: 21px; }34 div.info-bottom { height: 0px; width: 100%; clear: both; text-align: center; }35 div.info-bottom img { position: relative; z-index: 104; }36 table { height: 100%; }37 html, body { height: 100%; margin: 0px; padding: 0px; }38 .STYLE1 { color: #F3F3F3; }JS
1 var mapObj; 2 var marker = new Array(); 3 var windowsArr = new Array(); 4 //基本地图加载 5 function mapInit() { 6 mapObj = new AMap.Map("iCenter"); 7 //AMap.event.addListener(mapObj,'click',getLnglat); 8 } 9 function placeSearch() {10 var MSearch;11 mapObj.plugin(["AMap.PlaceSearch"], function () {12 MSearch = new AMap.PlaceSearch({ //构造地点查询类13 pageSize: 10,14 pageIndex: 1,15 city: "021" //城市16 });17 AMap.event.addListener(MSearch, "complete", keywordSearch_CallBack);//返回地点查询结果18 var searchName = document.all.searchText.value;//查询关键字19 MSearch.search(searchName); //关键字查询20 });21 }22 //添加marker&infowindow23 function addmarker(i, d) {24 var lngX = d.location.getLng();25 var latY = d.location.getLat();26 var markerOption = {27 map: mapObj,28 icon: "http://webapi.amap.com/images/" + (i + 1) + ".png",29 position: new AMap.LngLat(lngX, latY)30 };31 32 var mar = new AMap.Marker(markerOption);33 marker.push(new AMap.LngLat(lngX, latY));34 35 var infoWindow = new AMap.InfoWindow({36 content: "<h3 id="font-color-a-ac-i-d-name-font"><font color=\"#00a6ac\"> " + (i + 1) + ". " + d.name + "</font></h3>" + TipContents(d.type, d.address, d.tel),37 size: new AMap.Size(300, 0),38 autoMove: true,39 offset: new AMap.Pixel(0, -30)40 });41 windowsArr.push(infoWindow);42 var aa = function (e) { infoWindow.open(mapObj, mar.getPosition()); };43 AMap.event.addListener(mar, "click", aa);44 AMap.event.addListener(mar, 'click', getLnglat);45 }46 //回调函数47 function keywordSearch_CallBack(data) {48 var resultStr = "";49 var poiArr = data.poiList.pois;50 var resultCount = poiArr.length;51 for (var i = 0; i < resultCount; i++) {52 resultStr += "<div id='divid" + (i + 1) + "' onclick='openMarkerTipById1(" + i + ",this)' onmouseout='onmouseout_MarkerStyle(" + (i + 1) + ",this)' style=\"font-size: 12px;cursor:pointer;padding:0px 0 4px 2px; border-bottom:1px solid #C1FFC1;\"><table><tr><td><img src="/static/imghw/default1.png" data-src="http://webapi.amap.com/maps?v=1.2&key=XXXXXXX" class="lazy" src=\"http://webapi.amap.com/images/" + (i + 1) + ".png\" alt="高德地图根据关键词坐标拾取小工具_html/css_WEB-ITnose" ></td>" + "<td><h3 id="font-color-a-ac-名称-poiArr-i-name-font"><font color=\"#00a6ac\">名称: " + poiArr[i].name + "</font></h3>";53 resultStr += TipContents(poiArr[i].type, poiArr[i].address, poiArr[i].tel) + "</td></tr></table></div>";54 addmarker(i, poiArr[i]);55 }56 mapObj.setFitView();57 document.getElementById("result").innerHTML = resultStr;58 59 }60 function TipContents(type, address, tel) { //窗体内容61 if (type == "" || type == "undefined" || type == null || type == " undefined" || typeof type == "undefined") {62 type = "暂无";63 }64 if (address == "" || address == "undefined" || address == null || address == " undefined" || typeof address == "undefined") {65 address = "暂无";66 }67 if (tel == "" || tel == "undefined" || tel == null || tel == " undefined" || typeof address == "tel") {68 tel = "暂无";69 }70 var str = " 地址：" + address + "<br /> 电话：" + tel + " <br /> 类型：" + type;71 return str;72 }73 function openMarkerTipById1(pointid, thiss) { //根据id 打开搜索结果点tip74 thiss.style.background = '#CAE1FF';75 windowsArr[pointid].open(mapObj, marker[pointid]);76 77 //result中每个div触发的事件78 document.getElementById("lngX").value = marker[pointid].getLng();79 document.getElementById("latY").value = marker[pointid].getLat();80 81 }82 function onmouseout_MarkerStyle(pointid, thiss) { //鼠标移开后点样式恢复83 thiss.style.background = "";84 }85 //鼠标在地图上点击，获取经纬度坐标86 function getLnglat(e) {87 document.getElementById("lngX").value = e.lnglat.getLng();88 document.getElementById("latY").value = e.lnglat.getLat();89 }90 91 //关闭页面92 function CloseWind() {93 var lat = document.getElementById("lngX").value;94 var lon = document.getElementById("latY").value;95 opener.setValue(lat + "," + lon);96 window.close();97 98 }HTML
1 <script type="text/javascript"></script> 2 <table width="100%" border="0" cellspacing="0" cellpadding="0"> 3 <tr> 4 <td colspan="2" style="max-width:90%"> 5 <br> 6 高德地图：<input type="text" name="searchText"> 7 <input type="button" value="查询" onclick="placeSearch()" /> 输入位置信息 8 <br><br>地图经纬度坐标： X：<input type="text" id="lngX" name="lngX" /> Y：<input type="text" id="latY" name="latY" /> 9 <input type="button" name="btn_Close" id="btn_Close" value="确定，并关闭页面" onclick="CloseWind();" /> *选择正确地点之后，请点击该按钮10 </td>11 </tr>12 <tr>13 <td width="70%" height="500"> <div style="height:100%" id="iCenter"></div></td>14 <td valign="top">15 <div class="demo_box">16 <div id="r_title"><b>关键字查询结果:</b></div>17 <div id="result"> </div>18 </div>19 <span class="STYLE1"></span>20 </td>21 </tr>22 </table>
程序员淘宝店：http://iduds.taobao.com
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1376
52
So machen Sie Google Maps zur Standardkarte im iPhone
Apr 17, 2024 pm 07:34 PM
Die Standardkarte auf dem iPhone ist Maps, Apples proprietärer Geolokalisierungsanbieter. Obwohl die Karte immer besser wird, funktioniert sie außerhalb der Vereinigten Staaten nicht gut. Im Vergleich zu Google Maps hat es nichts zu bieten. In diesem Artikel besprechen wir die möglichen Schritte, um Google Maps als Standardkarte auf Ihrem iPhone zu nutzen. So machen Sie Google Maps zur Standardkarte auf dem iPhone. Das Festlegen von Google Maps als Standardkarten-App auf Ihrem Telefon ist einfacher als Sie denken. Befolgen Sie die nachstehenden Schritte – Erforderliche Schritte – Sie müssen Gmail auf Ihrem Telefon installiert haben. Schritt 1 – Öffnen Sie den AppStore. Schritt 2 – Suchen Sie nach „Gmail“. Schritt 3 – Klicken Sie auf neben der Gmail-App
Erklären Sie, was der Prozess explorer.exe ist
Feb 18, 2024 pm 12:11 PM
Welcher Prozess ist explorer.exe? Wenn wir das Windows-Betriebssystem verwenden, hören wir oft den Begriff „explorer.exe“. Sind Sie neugierig, was dieser Prozess ist? In diesem Artikel erklären wir ausführlich, was der Prozess explorer.exe ist und welche Funktionen und Auswirkungen er hat. Zunächst einmal ist explorer.exe ein Schlüsselprozess des Windows-Betriebssystems. Er ist für die Verwaltung und Steuerung des Windows Explorers (Windows) verantwortlich
Wie stelle ich die Blende beim Xiaomi Mi 14 Ultra ein?
Mar 19, 2024 am 09:01 AM
Die Anpassung der Blendengröße hat einen entscheidenden Einfluss auf den Fotoeffekt. Das Xiaomi Mi 14 Ultra bietet eine beispiellose Flexibilität bei der Einstellung der Kamerablende. Damit jeder die Blende reibungslos einstellen und die Blendengröße frei anpassen kann, bietet Ihnen der Herausgeber hier eine ausführliche Anleitung zum Einstellen der Blende beim Xiaomi Mi 14Ultra. Wie stelle ich die Blende beim Xiaomi Mi 14Ultra ein? Starten Sie die Kamera, wechseln Sie in den „Professionellen Modus“ und wählen Sie die Hauptkamera aus – W-Objektiv. Klicken Sie auf die Blende, öffnen Sie das Blendenrad, A ist automatisch, wählen Sie je nach Bedarf f/1,9 oder f/4,0.
Was ist die höchste Grafikkarte, die r5 5600x betreiben kann? Die neueste Leistung bei Verwendung von 5600X mit RX6800XT
Feb 25, 2024 am 10:34 AM
Am 29. Oktober veröffentlichte AMD endlich ein mit Spannung erwartetes Blockbuster-Produkt, die RX6000-Serie von Gaming-Grafikkarten, die auf der neuen RDNA2-Architektur basieren. Diese Grafikkarte ergänzt die zuvor eingeführten Prozessoren der Ryzen 5000-Serie auf Basis der neuen ZEN3-Architektur und bildet eine neue Doppel-A-Kombination. Diese Veröffentlichung stellte nicht nur den Konkurrenten „Shuangying“ in den Schatten, sondern hatte auch große Auswirkungen auf den gesamten DIY-Hardware-Kreis. Als nächstes nutzen wir die Kombination aus AMD Ryzen 5600X und RX6800XT in meinen Händen als Testbeispiel, um zu sehen, wie großartig AMD heute ist. Lassen Sie uns zunächst über den CPU-Prozessor sprechen. Es wurde tatsächlich die vorherige Generation der Prozessoren der AMD Ryzen 3000-Serie mit ZEN2-Architektur verwendet.
Mar 18, 2024 pm 01:20 PM
Ce Modifier (CheatEngine) ist ein Spielmodifizierungstool zum Ändern und Bearbeiten des Spielspeichers. Als Nächstes erklärt Ihnen der Editor, wie Sie Chinesisch in Ce Modifier festlegen. Bei der neuen Software, die wir herunterladen, kann es verwirrend sein, dass die Benutzeroberfläche nicht auf Chinesisch ist. Auch wenn diese Software nicht in China entwickelt wurde, gibt es Möglichkeiten, sie in die chinesische Version zu konvertieren. Dieses Problem kann durch einfaches Anwenden des chinesischen Patches gelöst werden. Öffnen Sie nach dem Herunterladen und Installieren der CheatEngine-Software (ce modifier) den Installationsort und suchen Sie den Ordner mit dem Namen „Sprachen“, wie in der folgenden Abbildung dargestellt
Was bedeutet der Fehler 0x0000004e?
Feb 18, 2024 pm 01:54 PM
Was ist ein 0x0000004e-Fehler? Ein Fehler ist ein häufiges Problem in Computersystemen. Wenn ein Computer auf einen Fehler stößt, fährt das System normalerweise herunter, stürzt ab oder zeigt Fehlermeldungen an, weil es nicht ordnungsgemäß ausgeführt werden kann. In Windows-Systemen gibt es einen spezifischen Fehlercode 0x0000004e, bei dem es sich um einen Bluescreen-Fehlercode handelt, der darauf hinweist, dass im System ein schwerwiegender Fehler aufgetreten ist. Der Bluescreen-Fehler 0x0000004e wird durch Systemkernel- oder Treiberprobleme verursacht. Dieser Fehler führt normalerweise dazu, dass das Computersystem
Was hat einen größeren Einfluss auf Leistung, Speicherfrequenz oder Timing?
Feb 19, 2024 am 08:58 AM
Der Speicher ist eine der wichtigsten Komponenten des Computers und hat einen erheblichen Einfluss auf die Leistung und Stabilität des Computers. Bei der Wahl des Gedächtnisses konzentrieren sich Menschen in der Regel auf zwei wichtige Parameter, nämlich Timing und Häufigkeit. Was ist also für die Gedächtnisleistung wichtiger: Timing oder Frequenz? Lassen Sie uns zunächst die Konzepte von Timing und Frequenz verstehen. Unter Timing versteht man das Zeitintervall, das ein Speicherchip benötigt, um Daten zu empfangen und zu verarbeiten. Sie wird normalerweise durch einen CL-Wert (CASLatency) dargestellt. Je kleiner der CL-Wert, desto schneller ist die Speicherverarbeitungsgeschwindigkeit. Die Frequenz liegt innerhalb
Wie aktualisiere ich Honor MagicOS 8.0 auf dem Honor 90 GT?
Mar 18, 2024 pm 06:46 PM
Honor 90GT ist ein kostengünstiges Smartphone mit hervorragender Leistung und hervorragendem Benutzererlebnis. Allerdings kann es manchmal zu Problemen kommen, z. B. wie aktualisiere ich Honor MagicOS8.0 auf dem Honor 90GT? Dieser Schritt kann bei verschiedenen Mobiltelefonen und Modellen unterschiedlich sein. Lassen Sie uns also besprechen, wie Sie das System richtig aktualisieren. Wie aktualisiere ich Honor MagicOS 8.0 auf Honor 90GT? Laut Nachrichten vom 28. Februar hat Honor heute das öffentliche Beta-Update von MagicOS8.0 für seine drei Mobiltelefone 90GT/100/100Pro veröffentlicht. Die Paketversionsnummer ist 8.0.0.106 (C00E106R3P1). . Stellen Sie sicher, dass der Akku des 90GT vollständig aufgeladen ist.
