高德地图 - 拖拽选址+搜索选址

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_34664239/article/details/89148491

实现效果 - 搜索和拖拽选址

思路

拖拽选址，用的是高德的UI组件库PositionPicker
添加圆标记用的是添加覆盖物-圆
搜索选址用的是搜索服务AMap.Autocomplete(根据输入关键字提示匹配信息)

重点
实现拖拽后会返回经纬度，主要是改变圆的位置，.circle.setCenter([location.lng,location.lat])，拖拽的时候，圆跟着位置点中心在动；
当搜索选址的时候，也会返回一个经纬度等位置信息，这时改变圆，地图不会动，地图的点标记也不会动，这时候，用一个方法搞定map.setFitView()

代码

<template>
    <div class="addFence">
        <my-head title="新增围栏" iconL="back" :hslotr='hslotr' @on-click-hleft="triggerHLeft" @on-click-hright='triggerHRight'></my-head>
        <div id="search">
            <div class="search_box">
                <div class="search_btn"><img src="/images/person/search.png" alt=""></div>
                <input id="search_adress" maxlength="30" type="text" v-model="searchText" placeholder="请输入搜索地址">
                <div class="close" @click="clearSearch"><img src="/images/person/clear.png" alt=""></div>
            </div>
        </div>
        <div id="map-container"></div>
        <div class="fence_msg">
            <mt-field label="中心位置" type='textarea' multiline='true' v-model="centerLocation"></mt-field>
            <mt-field label="围栏名称" placeholder="请输入围栏名称" v-model="fenceName"></mt-field>
            <mt-field label="围栏半径" v-model="radius">
                <!-- <mt-range class="rangeBox" v-model="rangeValue" :disabled="true" :barHeight="1">
                    <div slot="start"></div>
                    <div slot="end"></div>
                </mt-range>     -->
            </mt-field>
            <mt-field label="围栏报警" readonly placeholder="进围栏报警" v-model="fenceStyle"  @click.native="choiceFenceStyle">
                <img src="/images/arrowrightbb.png">
            </mt-field>

            <mt-actionsheet
                :actions= "data"
                v-model="sheetVisible">
            </mt-actionsheet>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            hslotr: '保存',
            rangeValue: '',
            centerLocation: '中心位置',
            fenceName: '围栏1',
            fenceStyle: '进围栏报警',
            data:[],
            sheetVisible: false,
            radius: 500,
            circle: null,
            map: {},
            searchText: ''
        }
    },
    mounted(){
       this.initMap();
    },
    methods:{
        triggerHLeft(){
            this.$router.go(-1);
        },
        triggerHRight(){
            console.log('点击了保存')
        },
        clearSearch(){
            this.searchText = '';
        },
        /* 做围栏圈圈 */
        addCircle(lat,lng,radius){
            lat = lat + "";
            lng = lng + "";
            this.circle = new AMap.Circle({
                center: new AMap.LngLat(lat,lng), // 圆心位置
                radius: radius,  //半径
                strokeColor: "#76D5C2",  //线颜色
                strokeOpacity: 1,  //线透明度
                strokeWeight: 1,  //线粗细度
                fillColor: "#76D5C2",  //填充颜色
                fillOpacity: 0.35 //填充透明度
            });
            this.map.add(this.circle);
            this.map.setFitView();
        },
        initMap(){
            const _this = this;
            _this.map = new AMap.Map('map-container', {
                zoom: 16,
                scrollWheel: false
            })
            /* 做地图拖拽选址 */
            AMapUI.loadUI(['misc/PositionPicker'], function(PositionPicker) {
                console.log('aaajdjdjdjdjdj')
                var positionPicker = new PositionPicker({
                    mode: 'dragMap',
                    map: _this.map
                });
                positionPicker.on('success', function(positionResult) {
                    let position = positionResult.position;
                    if(_this.circle){
                        console.log(position.lng,position.lat)
                        _this.circle.setCenter([position.lng,position.lat]);
                    }else{
                        _this.addCircle(position.lng, position.lat,_this.radius);
                    }
                    _this.centerLocation = positionResult.address;
                });
                positionPicker.on('fail', function(positionResult) {
                    console.log('fail');
                });
                var onModeChange = function(e) {
                    positionPicker.setMode(e.target.value)
                }
                positionPicker.start();
            });
            /* 搜索地址 */
            _this.map.plugin(["AMap.Autocomplete"], function() {
                var auto = new AMap.Autocomplete({
                    input: "search_adress"
                });
                AMap.event.addListener(auto, "select", function(result){
                    console.log(result);
                    let location = result.poi.location;
                    if(_this.circle){
                        _this.circle.setCenter([location.lng,location.lat]);
                    }else{
                        _this.addCircle(location.lng, location.lat,_this.radius);
                    }
                    _this.map.setFitView();
                });
            });
        },
        choiceFenceStyle(){
            const _this = this;
            this.data = [{
                name: '进围栏报警', method: function () {
                    _this.fenceStyle = '进围栏报警';
                    _this.sheetVisible = false;
                }
            },{
                name: '出围栏报警', method: function () {
                    console.log('出围栏报警')
                    _this.fenceStyle = '出围栏报警';
                    _this.sheetVisible = false;
                }
            },{
                name: '进/出围栏报警', method: function () {
                    _this.fenceStyle = '进/出围栏报警';
                    _this.sheetVisible = false;
                }
            },{
                name: '暂不报警', method: function () {
                    _this.fenceStyle = '暂不报警';
                    _this.sheetVisible = false;
                }
            }]
            this.sheetVisible = true;
        }
    }
}
</script>