今天早上在写代码的时候，需要用到地图坐标拾取工具，我们用的是搞的地图，在高德地图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: + (i + 1) + . + d.name + + 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 += + 名称: + poiarr[i].name + ;53 resultstr += tipcontents(poiarr[i].type, poiarr[i].address, poiarr[i].tel) +
;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 +
电话： + tel +
类型： + 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 2 3 4 5
6 高德地图： 7 输入位置信息 8
地图经纬度坐标： x： y： 9 *选择正确地点之后，请点击该按钮10 11
12 13
14 15 16 关键字查询结果:
17
18
19 20 21
22

程序员淘宝店：http://iduds.taobao.com