高德地图定位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
posted @ 2020-08-26 10:44 孤陌阅读(788) 评论(0) 编辑收藏举报
刷新页面返回顶部
登录后才能查看或发表评论，立即登录或者逛逛博客园首页
2025年3月
日
一
二
三
四
五
六
YaLe

发光并非太阳的专利，你也可以发光。

高德地图定位JS API

搜索

最新随笔

积分与排名

随笔档案 (49)

阅读排行榜

推荐排行榜
