高德地图定位JS API
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>道德地图定位</title> 6 <meta name="renderer" content="webkit"> 7 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 8 <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> 9 <style> 10 .amap-logo { 11 right: 0 !important; 12 left: auto !important; 13 display: none !important; 14 } 15 16 .amap-copyright { 17 right: 70px !important; 18 left: auto !important; 19 } 20 #sever_add{ 21 width: 100%; 22 height:50px; 23 background: #fff; 24 border:0px; 25 } 26 #lng{ 27 width: 100%; 28 height:50px; 29 background: #fff; 30 border:0px; 31 text-align: center; 32 } 33 #lat{ 34 width: 100%; 35 height:50px; 36 background: #fff; 37 border:0px; 38 text-align: center; 39 } 40 </style> 41 </head> 42 <body> 43 44 <div class="bMap"> 45 <input type="text" name="lng" id="lng" value="{notempty name='$article.lng'}{$article.lng}{else}116.434747{/notempty}" /> 46 <input type="text" name="lat" id="lat" value="{notempty name='$article.lat'}{$article.lat}{else}39.908133{/notempty}" /> 47 48 <input type="text" name="address" disabled="" style="text-align: center;" id='sever_add' size="20" value="{notempty name='$article.address'}{$article.address}{else /}请拖拽地图位置图标，获取位置信息{/notempty}" /> 49 <input type="hidden" name="address" id='address' value="{notempty name='$article.address'}{$article.address}{/notempty}" /> 50 <div id='map' style="max-width: 100%; height: 300px;"></div> 51 </div> 52 <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script> 53 <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=key&plugin=AMap.ToolBar"></script><!-- 定位api --> 54 <!-- UI组件库 1.0 --> 55 <script src="//webapi.amap.com/ui/1.1/main.js?v=1.1.1"></script> 56 <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script> 57 <script> 58 var lng = $("#lng").val(); 59 var lat = $("#lat").val(); 60 //加载PositionPicker，loadUI的路径参数为模块名中 'ui/' 之后的部分 61 AMapUI.loadUI(['misc/PositionPicker'], function(PositionPicker) { 62 var map = new AMap.Map('map',{ 63 zoom:16, 64 center:[lng,lat], 65 }) 66 // 地图定位事件 67 AMap.plugin('AMap.Geolocation', function () { 68 geolocation = new AMap.Geolocation({ 69 enableHighAccuracy: true,//是否使用高精度定位，默认:true 70 timeout: 10000, //超过10秒后停止定位，默认：无穷大 71 maximumAge: 0, //定位结果缓存0毫秒，默认：0 72 convert: true, //自动偏移坐标，偏移后的坐标为高德坐标，默认：true 73 showButton: true, //显示定位按钮，默认：true 74 buttonPosition: 'LB', //定位按钮停靠位置，默认：'LB'，左下角 75 buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20) 76 showMarker: true, //定位成功后在定位到的位置显示点标记，默认：true 77 showCircle: true, //定位成功后用圆圈表示定位精度范围，默认：true 78 panToLocation: true, //定位成功后将定位到的位置作为地图中心点，默认：true 79 zoomToAccuracy:true //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false 80 }); 81 map.addControl(geolocation); 82 // geolocation.getCurrentPosition(); //自动定位 83 }); 84 85 var positionPicker = new PositionPicker({ 86 mode:'dragMap',//设定为拖拽地图模式，可选'dragMap'、'dragMarker'，默认为'dragMap' 87 map:map//依赖地图对象 88 }); 89 90 // 定位成功和定位失败 91 92 positionPicker.on('success', function(positionResult) { 93 document.getElementById('lat').value = positionResult.position.lat; 94 document.getElementById('lng').value = positionResult.position.lng; 95 document.getElementById('sever_add').value = positionResult.address; 96 document.getElementById('address').value = positionResult.address; 97 }); 98 positionPicker.on('fail', function(positionResult) { 99 document.getElementById('lat').value = ''; 100 document.getElementById('lng').value = ''; 101 document.getElementById('sever_add').value = ''; 102 document.getElementById('address').value = ''; 103 }); 104 // 改变事件 105 var onModeChange = function(e) { 106 positionPicker.setMode(e.target.value) 107 } 108 109 positionPicker.start();//开始拖拽 110 111 map.panBy(0, 1); 112 // 控件 113 map.addControl(new AMap.ToolBar({ 114 liteStyle: true, 115 position: {top:'10px',right:'10px'}, 116 })) 117 }); 118 119 120 </script> 121 </body> 122 </html>
注意：把key换成自己的key
