H5拖拽地址-高德地图VUE版

注意：这是直接引入vue.js的，没有用脚手架webpack

如果用webpack有专门vue的高德地图，但是暂时还没看到里面有拖拽UI

HTML的代码如下

 1 <template id="maps">
 2     <div class="page navbar js_show zindex" >
 3         <div id="containers" class="map" tabindex="0"></div>
 4             <div class="weui-panel weui-panel_access">
 5                 <!-- <div class="weui-panel__hd topOne"></div> -->
 6                 <div class="weui-panel__bd topTwo">
 7                     <div class="weui-media-box weui-media-box_text" v-show="addressBox.length==0" >
 8                         <h4 class="weui-media-box__title">定位失败</h4>
 9                         <p class="weui-media-box__desc">请打开GPS重试！</p>
10                     </div>
11                     <router-link to="/addresss">
12                         <div class="weui-media-box weui-media-box_text box_text" v-show="addressBox.length!=0" v-for="item in addressBox"  @click="clickName(item.name)" :data-id="item.id" :data-name="item.name">
13                             <h4 class="weui-media-box__title">
14                                 <i class="iconfont icon-icon1460191833045"></i>{{item.name}}</h4>
15                             <p class="weui-media-box__desc">{{item.address}}</p>
16                         </div>
17                     </router-link>
18                  </div>
19             </div>
20         </div>
21         
22 </template>

JS代码如下

 1  const maps = Vue.component('maps', {
 2         template: '#maps', //用什么模板来渲染他
 3         data() {
 4             return {
 5                 locat: '',
 6                 locats: '',
 7                 longitudes: 0, //经度
 8                 latitudes: 0, //维度
 9                 addressBox: [],
10             }
11         },
12         mounted() {
13             console.log('模板编译完成');
14             // alert('模板编译完成')
15             const self = this;
16             window.navigator.geolocation.getCurrentPosition(function(position) {
17                 self.longitudes = position.coords.longitude;
18                 self.latitudes = position.coords.latitude;
19                 let url = "https://restapi.amap.com/v3/assistant/coordinate/convert?locations=" + self.longitudes + "," + self.latitudes + "&coordsys=gps&output=json&key=c962412697057591abdf0be494fc2c2b";
20                 $.ajax({
21                     type: "GET",
22                     url: url,
23                     dataType: "jsonp",
24                     success: function(data) {
25                         if (data.status == 1) {
26                             self.locat = data.locations;
27                             self.locats = self.locat.split(',');
28                             self.initMap(self.locats[0], self.locats[1]);
29                         }
30                     },
31                     error: function(data) {
32                         alert("错误了");
33                     }
34                 });
35             });
36         },
37         created() {
38             console.log('实例已经创建完成');
39         },
40         methods: {
41             clickName(n) {
42                 alert(n);
43             },
44             initMap(q1, q2) {
45                 const self = this;
46                 AMapUI.loadUI(['misc/PositionPicker'], function(PositionPicker) {
47                     var map = new AMap.Map('containers', {
48                         zoom: 17,
49                         center: [q1, q2],
50                         // center: [121.59996, 31.197646],
51                         resizeEnable: true,
52                         scrollWheel: false
53                     })
54                     var positionPicker = new PositionPicker({
55                         mode: 'dragMap',
56                         map: map
57                     });
58 
59                     positionPicker.on('success', function(positionResult) {
60                         self.addressBox = [];
61                         console.log(positionResult)
62                         let addsLen = positionResult.regeocode.pois;
63                         // console.log(JSON.stringify(addsLen))
64                         addsLen.forEach(function(el) {
65                             self.addressBox.push(el)
66                                 // console.log(el)
67                         }, this);
68                     });
69                     positionPicker.on('fail', function(positionResult) {
70                         console.log(positionResult)
71                     });
72 
73                     positionPicker.start();
74                     map.panBy(0, 1);
75 
76                     map.addControl(new AMap.ToolBar({
77                         liteStyle: true
78                     }))
79                 });
80 
81             }
82 
83         }
84     });

需要引入的东西

 1 <script src="framework/example/zepto.min.js"></script>
 2 <script src="https://res.wx.qq.com/open/libs/weuijs/1.0.0/weui.min.js"></script>
 3 <script src="framework/vue.js"></script>
 4 <script src="framework/vue-router.js"></script>
 5 <script src="javascripts/app.js"></script>
 6 <!-- 原始地址：//webapi.amap.com/ui/1.0/ui/misc/PositionPicker/examples/positionPicker.html -->
 7 <base href="//webapi.amap.com/ui/1.0/ui/misc/PositionPicker/examples/" />
 8 <script src="//webapi.amap.com/maps?v=1.3&key=你的key=AMap.ToolBar"></script>
 9 <!-- UI组件库 1.0 -->
10 <script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.10"></script>

效果图一样