百度地图地图标注经纬度
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <title>地图标注经纬度</title> <meta name="viewport" content="width=device-width, initial-scale=1"/> <meta name="renderer" content="webkit"/> <meta http-equiv="Cache-Control" content="no-siteapp"/> <link rel="stylesheet" href="dist/layui.css" media="all" /> <script src="dist/jquery-1.11.3.min.js"></script> <script src="dist/layer.js"></script> </head> <body> <div class="admin-main layui-anim layui-anim-upbit" ng-app="hd" ng-controller="ctrl"> <div class="layui-form-item"> <div class="layui-inline"> <label class="layui-form-label must" >地理位置</label> <div class="layui-input-inline" style="width: 100px;"> <input type="text" id="risenemLng" readonly name="longitude" value="0" placeholder="请标注位置" class="layui-input"> </div> <div class="layui-form-mid">-</div> <div class="layui-input-inline" style="width: 100px;"> <input type="text" id="risenemLat" readonly name="latitude" value="0" placeholder="请标注位置" class="layui-input"> </div> <button type="button" class="layui-btn layui-btn-normal" onClick="dz()">标注位置</button> <div class="layui-form-mid layui-word-aux" id="risenemEventplace"></div> </div> </div> <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=uGkn6BcgfeV0RXiAScw9K2vq8ccZNBcyNczvH"></script> <script> //弹出地图 function dz(){ layer.open({ type: 2, title: '标注位置', shadeClose: true, shade: 0.8, btn: ['确认'], anim:0, area: ['60%', '70%'], <!-- content: "/wyoshop/wms/maps", //iframe的url --> content: "/maps.html", //iframe的url scrollbar: false }); } </script> <div class="layui-form-item"> <div class="layui-input-block"> <button type="button" class="layui-btn submit" lay-submit="" lay-filter="submit">提交</button> <a href="index" class="layui-btn layui-btn-primary">返回</a> </div> </div> </form> </div> <script> $(document).ready(function(){ $(".submit").click(function(){ }); }); </script> </body> </html>
maps.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <meta name="viewport" content="width=device-width, initial-scale=1"/> <meta name="renderer" content="webkit"/> <meta http-equiv="Cache-Control" content="no-siteapp"/> <script src="dist/jquery-1.11.3.min.js"></script> </head> <body> <style> #mapContainer { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .am-g{background:#fff} #tip { background-color: #fff; border: 1px solid #ccc; padding-left: 10px; padding-right: 2px; position: absolute; min-height: 65px; top: 10px; font-size: 12px; left: 10px; border-radius: 3px; overflow: hidden; line-height: 20px; min-width: 30%; z-index: 999999; } #tip input[type="button"] { background-color: #0D9BF2; height: 25px; text-align: center; line-height: 25px; color: #fff; font-size: 12px; border-radius: 3px; outline: none; border: 0; cursor: pointer; } #tip input[type="text"] { height: 25px; border: 1px solid #ccc; padding-left: 5px; border-radius: 3px; outline: none; } #pos { height: 80px; background-color: #fff; padding-left: 10px; padding-right: 10px; position: absolute; font-size: 12px; right: 10px; bottom: 30px; border-radius: 3px; line-height: 30px; border: 1px solid #ccc; z-index: 99999; } #pos input { border: 1px solid #ddd; height: 23px; border-radius: 3px; outline: none; width: 100px; } #result1 { display: none; } b { display: block; margin: 5px 0; color: red; } .amap-info-content { font: 1px arial, sans-serif; overflow: visible; padding-top: 4px; white-space: -moz-pre-wrap; word-wrap: break-word; color: #777; } .amap-info-content h3 { color: #CC5522; font-size: 14px; font-weight: bold; overflow: hidden; padding-right: 13px; white-space: nowrap; margin: 5px 0px; } </style> <!--地图容器--> <div id="mapContainer"></div> <div id="tip"> <b>请输入关键字：</b> <input type="text" id="keyword" name="keyword" value="" onkeydown='keydown(event)' style="width: 95%;"/> <div id="result1" name="result1"></div> </div> <div id="pos"> <b>请鼠标左键在地图上单击获取坐标</b> <div>经度：<input type="text" id="lngX" name="lngX" readonly value=""/> 纬度：<input readonly type="text" id="latY" name="latY" value=""/></div> <div style="display: none">城市：<input type="text" id="llcity" readonly name="llcity" value=""/></div> </div> <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.3&key=2f5b982deca94574456ca573c2bd4874"></script> <script type="text/javascript"> var windowsArr = []; var marker = []; var mapObj = new AMap.Map("mapContainer", { resizeEnable: true, view: new AMap.View2D({ resizeEnable: true, zoom: 13//地图显示的缩放级别 }), keyboardEnable: false }); mapObj.setDefaultCursor("pointer"); var clickEventListener = AMap.event.addListener(mapObj, 'click', function (e) { console.log(e); document.getElementById("lngX").value = e.lnglat.getLng(); document.getElementById("latY").value = e.lnglat.getLat(); AMap.service('AMap.Geocoder', function () { //实例化Geocoder geocoder = new AMap.Geocoder({ city: ""//城市，默认：“全国” }); var lnglatXY = [e.lnglat.getLng(), e.lnglat.getLat()];//地图上所标点的坐标 geocoder.getAddress(lnglatXY, function (status, result) { if (status === 'complete' && result.info === 'OK') { //获得了有效的地址信息: //即，result.regeocode.formattedAddress //console.log(result); var city = result.regeocode.addressComponent.city; } else { var city = '获取失败'; //获取地址失败 } document.getElementById("llcity").value = city; var _iframe = window.parent;//获取父页面中的窗口对象（index1.html var risenemLng = _iframe.document.getElementById("risenemLng").value = e.lnglat.getLng(); var risenemLat = _iframe.document.getElementById("risenemLat").value = e.lnglat.getLat(); console.log(city); }); }) }); document.getElementById("keyword").onkeyup = keydown; //输入提示 function autoSearch() { var keywords = document.getElementById("keyword").value; var auto; //加载输入提示插件 AMap.service(["AMap.Autocomplete"], function () { var autoOptions = { city: "" //城市，默认全国 }; auto = new AMap.Autocomplete(autoOptions); //查询成功时返回查询结果 if (keywords.length > 0) { auto.search(keywords, function (status, result) { autocomplete_CallBack(result); }); } else { document.getElementById("result1").style.display = "none"; } }); } //输出输入提示结果的回调函数 function autocomplete_CallBack(data) { var resultStr = ""; var tipArr = data.tips; if (tipArr && tipArr.length > 0) { for (var i = 0; i < tipArr.length; i++) { resultStr += "<div id='divid" + (i + 1) + "' onmouseover='openMarkerTipById(" + (i + 1) + ",this)' onclick='selectResult(" + i + ")' onmouseout='onmouseout_MarkerStyle(" + (i + 1) + ",this)' style=\"font-size: 13px;cursor:pointer;padding:5px 5px 5px 5px;\"" + "data=" + tipArr[i].adcode + ">" + tipArr[i].name + "<span style='color:#C1C1C1;'>" + tipArr[i].district + "</span></div>"; } } else { resultStr = " π__π 亲,人家找不到结果!<br />要不试试：<br />1.请确保所有字词拼写正确<br />2.尝试不同的关键字<br />3.尝试更宽泛的关键字"; } document.getElementById("result1").curSelect = -1; document.getElementById("result1").tipArr = tipArr; document.getElementById("result1").innerHTML = resultStr; document.getElementById("result1").style.display = "block"; } //输入提示框鼠标滑过时的样式 function openMarkerTipById(pointid, thiss) { //根据id打开搜索结果点tip thiss.style.background = '#CAE1FF'; } //输入提示框鼠标移出时的样式 function onmouseout_MarkerStyle(pointid, thiss) { //鼠标移开后点样式恢复 thiss.style.background = ""; } //从输入提示框中选择关键字并查询 function selectResult(index) { if (index < 0) { return; } if (navigator.userAgent.indexOf("MSIE") > 0) { document.getElementById("keyword").onpropertychange = null; document.getElementById("keyword").onfocus = focus_callback; } //截取输入提示的关键字部分 var text = document.getElementById("divid" + (index + 1)).innerHTML.replace(/<[^>].*?>.*<\/[^>].*?>/g, ""); var cityCode = document.getElementById("divid" + (index + 1)).getAttribute('data'); document.getElementById("keyword").value = text; document.getElementById("result1").style.display = "none"; //根据选择的输入提示关键字查询 mapObj.plugin(["AMap.PlaceSearch"], function () { var msearch = new AMap.PlaceSearch(); //构造地点查询类 AMap.event.addListener(msearch, "complete", placeSearch_CallBack); //查询成功时的回调函数 msearch.setCity(cityCode); //console.log(cityCode); msearch.search(text); //关键字查询查询 }); } //定位选择输入提示关键字 function focus_callback() { if (navigator.userAgent.indexOf("MSIE") > 0) { document.getElementById("keyword").onpropertychange = autoSearch; } } //输出关键字查询结果的回调函数 function placeSearch_CallBack(data) { //清空地图上的InfoWindow和Marker windowsArr = []; marker = []; mapObj.clearMap(); var resultStr1 = ""; var poiArr = data.poiList.pois; var resultCount = poiArr.length; for (var i = 0; i < resultCount; i++) { resultStr1 += "<div id='divid" + (i + 1) + "' onmouseover='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=\"https://webapi.amap.com/images/" + (i + 1) + ".png\"></td>" + "<td><h3><font color=\"#00a6ac\">名称: " + poiArr[i].name + "</font></h3>"; resultStr1 += TipContents(poiArr[i].type, poiArr[i].address, poiArr[i].tel) + "</td></tr></table></div>"; addmarker(i, poiArr[i]); } mapObj.setFitView(); } //鼠标滑过查询结果改变背景样式，根据id打开信息窗体 function openMarkerTipById1(pointid, thiss) { thiss.style.background = '#CAE1FF'; windowsArr[pointid].open(mapObj, marker[pointid]); } //添加查询结果的marker&infowindow function addmarker(i, d) { var lngX = d.location.getLng(); var latY = d.location.getLat(); var markerOption = { map: mapObj, icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png", position: new AMap.LngLat(lngX, latY) }; var mar = new AMap.Marker(markerOption); marker.push(new AMap.LngLat(lngX, latY)); var infoWindow = new AMap.InfoWindow({ content: "<h3><font color=\"#1E9FFF\"> " + (i + 1) + ". " + d.name + "</font></h3>" + TipContents(d.type, d.address, d.tel), size: new AMap.Size(300, 0), autoMove: true, offset: new AMap.Pixel(0, -30) }); windowsArr.push(infoWindow); var autoData = function (e) { var nowPosition = mar.getPosition(), lng_str = nowPosition.lng, lat_str = nowPosition.lat; infoWindow.open(mapObj, nowPosition); // document.getElementById("lngX").value = lng_str; // document.getElementById("latY").value = lat_str; AMap.service('AMap.Geocoder', function () { //实例化Geocoder geocoder = new AMap.Geocoder({ city: "" }); var lnglatXY = [lng_str, lat_str]; geocoder.getAddress(lnglatXY, function (status, result) { if (status === 'complete' && result.info === 'OK') { //获得了有效的地址信息: //即，result.regeocode.formattedAddress //console.log(result); var city = result.regeocode.addressComponent.city; } else { var city = '获取失败'; //获取地址失败 } document.getElementById("llcity").value = city; console.log(city); }); }) }; AMap.event.addListener(mar, "mouseover", autoData); AMap.event.addListener(mar, "click", function (e) { var nowPosition = mar.getPosition(), lng_str = nowPosition.lng, lat_str = nowPosition.lat; document.getElementById("lngX").value = lng_str; document.getElementById("latY").value = lat_str; var _iframe = window.parent;//获取父页面中的窗口对象（index1.html var risenemLng = _iframe.document.getElementById("risenemLng").value = lng_str; var risenemLat = _iframe.document.getElementById("risenemLat").value = lat_str; console.log(lng_str); }); } //infowindow显示内容 function TipContents(type, address, tel) { //窗体内容 if (address == "" || address == "undefined" || address == null || address == " undefined" || typeof address == "undefined") { address = "暂无"; } var str = " 地址：" + address; return str; } function keydown(event) { var key = (event || window.event).keyCode; var result = document.getElementById("result1"); var cur = result.curSelect; if (key === 40) { if (cur + 1 < result.childNodes.length) { if (result.childNodes[cur]) { result.childNodes[cur].style.background = ''; } result.curSelect = cur + 1; result.childNodes[cur + 1].style.background = '#CAE1FF'; document.getElementById("keyword").value = result.tipArr[cur + 1].name; } } else if (key === 38) { if (cur - 1 >= 0) { if (result.childNodes[cur]) { result.childNodes[cur].style.background = ''; } result.curSelect = cur - 1; result.childNodes[cur - 1].style.background = '#CAE1FF'; document.getElementById("keyword").value = result.tipArr[cur - 1].name; } } else if (key === 13) { var res = document.getElementById("result1"); if (res && res['curSelect'] !== -1) { selectResult(document.getElementById("result1").curSelect); } } else { autoSearch(); } } </script> </body> </html>
---------------------------
