H5拖拽定位实例-高德地图接口

1.首先要准备一个对象

叫做 JavaScript Window Navigator

传送门

2.准备高德地图的UI组件-拖拽选址

传送门

 

开始贴代码！

  1  <script type="text/javascript">
  2         var locat, locats, jd, wd, adds = '',
  3             addres;
  4         $(document).on('click', '.box_text', function() {
  5             alert($(this).attr('data-name'))
  6         })
  7 
  8         function maps(params, params2) {
  9 
 10             AMapUI.loadUI(['misc/PositionPicker'], function(PositionPicker) {
 11                 console.log(params)
 12                 console.log(params2)
 13                 var map = new AMap.Map('container', {
 14                     zoom: 17,
 15                     center: [params, params2],
 16                     resizeEnable: true,
 17                     scrollWheel: false
 18                 })
 19                 var positionPicker = new PositionPicker({
 20                     mode: 'dragMap',
 21                     map: map
 22                 });
 23 
 24                 positionPicker.on('success', function(positionResult) {
 25                     $(".topTwo").html('');
 26                     adds = '';
 27                     var addsLen = positionResult.regeocode.pois;
 28                     // console.log(addsLen.length)
 29                     addsLen.forEach(function(data) {
 30                         // console.log(data);
 31                         // console.log(e.address);
 32                         addres = '<div class="weui-media-box weui-media-box_text box_text" data-id="' + data.id + '" data-name="' + data.name + '">'
 33                         addres += '<h4 class="weui-media-box__title"><i class="iconfont icon-icon1460191833045"></i>' + data.name + '</h4>'
 34                         addres += '<p class="weui-media-box__desc">' + data.address + '</p>'
 35                         addres += '</div>'
 36                         adds += addres;
 37                     });
 38                     $(".topTwo").append(adds);
 39 
 40                     // address: "黄埔大道中197"
 41                     // businessArea: "员村"
 42                     // direction: "东北"
 43                     // distance: 127
 44                     // id: "B00140U04W"
 45                     // location: c
 46                     // name: "鸿运花园"
 47                     // tel: ""
 48                     // type: "商务住宅;住宅区;住宅小区"
 49 
 50                     // document.getElementById('lnglat').innerHTML = positionResult.position;
 51                     // document.getElementById('address').innerHTML = positionResult.address;
 52                     // document.getElementById('nearestJunction').innerHTML = positionResult.nearestJunction;
 53                     // document.getElementById('nearestRoad').innerHTML = positionResult.nearestRoad;
 54                     // document.getElementById('nearestPOI').innerHTML = positionResult.nearestPOI;
 55                 });
 56                 positionPicker.on('fail', function(positionResult) {
 57                     console.log(positionResult)
 58                         // document.getElementById('lnglat').innerHTML = ' ';
 59                         // document.getElementById('address').innerHTML = ' ';
 60 
 61                     // document.getElementById('nearestJunction').innerHTML = ' ';
 62                     // document.getElementById('nearestRoad').innerHTML = ' ';
 63                     // document.getElementById('nearestPOI').innerHTML = ' ';
 64                 });
 65                 // var onModeChange = function(e) {
 66                 //     positionPicker.setMode(e.target.value)
 67                 // }
 68 
 69                 // var startButton = document.getElementById('start');
 70                 // var stopButton = document.getElementById('stop');
 71                 // var dragMapMode = document.getElementsByName('mode')[0];
 72                 // var dragMarkerMode = document.getElementsByName('mode')[1];
 73                 // AMap.event.addDomListener(startButton, 'click', function() {
 74                 //     positionPicker.start(map.getBounds().getSouthWest())
 75                 // })
 76                 // AMap.event.addDomListener(stopButton, 'click', function() {
 77                 //     positionPicker.stop();
 78                 // })
 79                 // AMap.event.addDomListener(dragMapMode, 'change', onModeChange)
 80                 // AMap.event.addDomListener(dragMarkerMode, 'change', onModeChange);
 81                 positionPicker.start();
 82                 map.panBy(0, 1);
 83 
 84                 map.addControl(new AMap.ToolBar({
 85                     liteStyle: true
 86                 }))
 87             });
 88         }
 89 
 90         window.navigator.geolocation.getCurrentPosition(function(position) {
 91             jd = position.coords.longitude;
 92             wd = position.coords.latitude;
 93 
 94             url = "https://restapi.amap.com/v3/assistant/coordinate/convert?locations=" + jd + "," + wd + "&coordsys=gps&output=json&key=c962412697057591abdf0be494fc2c2b";
 95             $.ajax({
 96                 type: "GET",
 97                 url: url,
 98                 dataType: "jsonp",
 99                 success: function(data) {
100                     console.log(data);
101                     if (data.status == "1") {
102                         locat = data.locations;
103                         locats = locat.split(',');
104                         console.log(locat.split(','));
105                         // maps(jd, wd);
106                         maps(locats[0], locats[1]);
107                     }
108                 },
109                 error: function(data) {
110                     alert("错误了");
111                     console.log(data)
112                 }
113             });
114         });
115     </script>

 

效果如下！

posted @ 2017-08-11 10:46  祗堂幻狼  阅读(4931)  评论(1)  编辑  收藏  举报