高德地图根据关键词坐标拾取小工具
今天早上在写代码的时候,需要用到地图坐标拾取工具,我们用的是搞的地图,在高德地图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; }
View Code
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&infowindow 23 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><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) + "' οnclick='openMarkerTipById1(" + i + ",this)' οnmοuseοut='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=\"http://webapi.amap.com/images/" + (i + 1) + ".png\"></td>" + "<td><h3><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 打开搜索结果点tip 74 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 }
View Code
HTML
1 <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.2&key=XXXXXXX"></script> 2 <table width="100%" border="0" cellspacing="0" cellpadding="0"> 3 <tr> 4 <td colspan="2" height="50"> 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>
View Code
程序员淘宝店:http://iduds.taobao.com
转载于:https://www.cnblogs.com/zhaoxuntao/p/3994975.html
高德地图根据关键词坐标拾取小工具相关推荐
- 天地图<——>高德地图互转坐标 工具类
1.首先弄明白几种在线地图的坐标系: (1)天地图:CGCS2000,2000国家大地坐标系:我们其实很多时候直接用WGS84的坐标来代替CGCS2000坐标.因为CGCS2000的定义与WGS84实 ...
- 高德地图-鼠标获取坐标
1.问题背景 鼠标点击地图,获取点击处的经纬度,并将经度和纬度放到输入框中 2.实现源码 <!DOCTYPE html> <html><head><meta ...
- 高德地图上线全国最全小客车、货车限行提醒功能
近年来,各大城市为了治理交通拥堵问题,都纷纷开始实施各类限行措施,不仅限路段.限时间.限区域,货车还要限高限重,这就让很多开车的朋友们特别烦恼,限行措施不断出新,哪里记得住,一不小心就得吃到罚单,增加 ...
- 解决高德地图锁屏黑屏定位不更新,高德地图绘制定位轨迹,高德定位判断定位停留点,高德地图将所有坐标绘制在可视区域内
本文章主要介绍 高德定位锁屏黑屏定位不更新的问题. 实现流程是:程序开始阶段正常执行定位,注册监听锁屏监听,唤醒cpu监听,当锁屏 广播每2秒发起一起单次定位唤醒.源码如下: package net. ...
- 高德地图获取当前坐标android,uniapp 用高德地图获取当前的坐标
image.png 1.引入依赖的SDK import amap from '../../common/amap-wx.js'; 2.初始话控件 var amapPluginInstance = ne ...
- 各地图平台的坐标拾取系统
百度地图--拾取坐标系统 网址:http://api.map.baidu.com/lbsapi/getpoint/index.html 谷歌地图--自带坐标获取 网址:https://www.goog ...
- Android 高德地图给指定坐标显示图片,以及聚合显示
官网实例请点击:Android 高德地图聚合官网 下面是一个案例: 效果图: MainActivity public class MainActivity extends AppCompatActiv ...
- Java 根据高德地图获取经纬度坐标
1: 申请高德服务key /*** @param addressName* @param cityName* @Description 根据高德地图, 通过地址获取经纬度坐标* @Throws* @R ...
- 高德地图api调用demo_微信小程序----高德地图API实现的DEMO
[实例简介] 微信小程序----高德地图API实现的周边,天气,路线规划,地址详情等的DEMO.简单的效果,问一下官方能不能不要乱涨积分,你们涨积分,作者被骂!我真的很失望,再这样,我就不上传资源了! ...
- 高德地图POI信息获取——爬虫小实验
写在前面:不详尽支出,各位看官可在留言区留言说明,我会尽快补充回复! 上传一个之前数据爬取过程中,编写的一个小程序,代码如下 # -*- coding: utf-8 -*- import json i ...
最新文章
- 用DataBindings属性绑定控件的值
- 出入口控制系统工程设计规范_【理论冲刺】传说中的隐藏书目——《公园设计规范》...
- 【转载】十年学会编程
- python中变量不需要事先声明_第二章 Python 变量
- 「分布式系统理论」系列专题
- Docker日志收集最佳实践
- python分词统计词频_基于结巴分词做的全文分词统计词频小脚本
- 聚聚科技---PHP开发笔试题及答案
- 【mediasoup 带宽估计】aimd算法2 : AimdRateControl
- 抖音特效专场PR模板 Premiere视频转场过渡快速切换画面视频模板下载
- 利用WinRar制作软件更新包
- python爬虫笔记五:汽车之家贴吧信息(字体反爬-动态映射)
- mysql(zip版)下载安装教程
- NO.79——BFS,DFS,Astar,爬山法,最抖爬山法,模拟退火法解决八数码问题Python实现
- Can't create pdf file with font calibri bold 错误解决方案
- 微信小程序标签页组件
- Sieve of Eratosthenes(埃拉托色尼筛选法)——C++实现
- 将站点数据插值到格点上
- 腾讯视频采集规则+发布模块(基于火车头全站采集与发布站点教程)
- 网络基础知识之IP与子网掩码和网络地址