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>
效果图一样
