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

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

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

HTML的代码如下

<template id="maps">
    <div class="page navbar js_show zindex" >
        <div id="containers" class="map" tabindex="0"></div>
            <div class="weui-panel weui-panel_access">
                <!-- <div class="weui-panel__hd topOne"></div> -->
                <div class="weui-panel__bd topTwo">
                    <div class="weui-media-box weui-media-box_text" v-show="addressBox.length==0" >
                        <h4 class="weui-media-box__title">定位失败</h4>
                        <p class="weui-media-box__desc">请打开GPS重试！</p>
                    </div>
                    <router-link to="/addresss">
                        <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">
                            <h4 class="weui-media-box__title">
                                <i class="iconfont icon-icon1460191833045"></i>{{item.name}}</h4>
                            <p class="weui-media-box__desc">{{item.address}}</p>
                        </div>
                    </router-link>
                 </div>
            </div>
        </div>
        
</template>

JS代码如下

 const maps = Vue.component('maps', {
        template: '#maps', //用什么模板来渲染他
        data() {
            return {
                locat: '',
                locats: '',
                longitudes: 0, //经度
                latitudes: 0, //维度
                addressBox: [],
            }
        },
        mounted() {
            console.log('模板编译完成');
            // alert('模板编译完成')
            const self = this;
            window.navigator.geolocation.getCurrentPosition(function(position) {
                self.longitudes = position.coords.longitude;
                self.latitudes = position.coords.latitude;
                let url = "https://restapi.amap.com/v3/assistant/coordinate/convert?locations=" + self.longitudes + "," + self.latitudes + "&coordsys=gps&output=json&key=c962412697057591abdf0be494fc2c2b";
                $.ajax({
                    type: "GET",
                    url: url,
                    dataType: "jsonp",
                    success: function(data) {
                        if (data.status == 1) {
                            self.locat = data.locations;
                            self.locats = self.locat.split(',');
                            self.initMap(self.locats[0], self.locats[1]);
                        }
                    },
                    error: function(data) {
                        alert("错误了");
                    }
                });
            });
        },
        created() {
            console.log('实例已经创建完成');
        },
        methods: {
            clickName(n) {
                alert(n);
            },
            initMap(q1, q2) {
                const self = this;
                AMapUI.loadUI(['misc/PositionPicker'], function(PositionPicker) {
                    var map = new AMap.Map('containers', {
                        zoom: 17,
                        center: [q1, q2],
                        // center: [121.59996, 31.197646],
                        resizeEnable: true,
                        scrollWheel: false
                    })
                    var positionPicker = new PositionPicker({
                        mode: 'dragMap',
                        map: map
                    });

                    positionPicker.on('success', function(positionResult) {
                        self.addressBox = [];
                        console.log(positionResult)
                        let addsLen = positionResult.regeocode.pois;
                        // console.log(JSON.stringify(addsLen))
                        addsLen.forEach(function(el) {
                            self.addressBox.push(el)
                                // console.log(el)
                        }, this);
                    });
                    positionPicker.on('fail', function(positionResult) {
                        console.log(positionResult)
                    });

                    positionPicker.start();
                    map.panBy(0, 1);

                    map.addControl(new AMap.ToolBar({
                        liteStyle: true
                    }))
                });

            }

        }
    });

需要引入的东西

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

效果图一样