这是一个小小的定位功能,没有添加其他功能,仅供大家参考,下面是代码:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> <title>逆地理编码</title> <link rel="stylesheet" href="../API/Api.css"/> <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=ada0145080deff882d2a28e8af2047ad&plugin=AMap.Geocoder"></script> <script type="text/javascript" src="../API/toolbar.js"></script> </head> <body> <div class="box_dis"> <div type="text" class="search"><img id="" src="../API/images.jpg" height="15" width="15">搜索地点 </div> </div> <div class="distance"> <div id="container"></div> </div> <div class="scroll" id="view"> <div class='list' > <p id="result" class='site'></p> <span class='right'><img class='tex' src='../API/outstyle091100004.jpg' id="+name.site+"></span></div> </div> <script type="text/javascript"> window.onload = function () { getLocation() regeocoder() } function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } } function showPosition(position) { var obj_info = {name: position.coords.latitude, shop: position.coords.longitude}; localStorage.setItem("info", JSON.stringify(obj_info)); } function regeocoder() { //逆地理编码 var map = new AMap.Map("container", { resizeEnable: true, zoom: 18 }) lnglatXY = [] var ss=JSON.parse(localStorage.getItem("info")) lnglatXY.push(ss.shop) lnglatXY.push(ss.name) console.log(lnglatXY) ; var geocoder = new AMap.Geocoder({ radius: 1000, extensions: "all" }); geocoder.getAddress(lnglatXY, function (status, result) { if (status === 'complete' && result.info === 'OK') { geocoder_CallBack(result); } }); var marker = new AMap.Marker({ //加点 map: map, position: lnglatXY }); map.setFitView(); } function geocoder_CallBack(data) { var address = data.regeocode.formattedAddress; //返回地址描述 document.getElementById("result").innerHTML = address; } </script> </body> </html>
css代码也带来了,不用谢
.search{ height: 20px; width: 98%; margin-left: 12px; border:1px solid #e3e3e3; text-align: center; font-size: 5px; color:gray; } #mapContainer{ height: 300px; width: 100%; left: 0; right:0; bottom:0; } .map{ height: 300px; width: 100%; left: 0; right:0; bottom:0; } .scroll{ height: 325px; width: 100%; overflow-y:scroll; } /*overflow:hidden*/ html { overflow: hidden; } body{ margin: 0; } .distance{ margin-top: 8px; margin-bottom: 4px; } .box_dis{ margin-top: 10px; } /*div#view::-webkit-scrollbar {*/ /*background: transparent;*/ /*}*/ /*div#view:hover::-webkit-scrollbar {*/ /*background: lightyellow;*/ /*}*/ .list{ width: 98%; height: 50px; border-bottom:1px solid #e3e3e3; margin-left:25px; } .site{ padding-top: 10px; }