高德地图点击定位，视图跟随、设置marker

<template>
    <div class="map">
        <div id="container"></div>
        <div class="search-map">
            <input class="" id="tipinput" @focus="setStyle" autocomplete="off"/>
        </div>
    </div>
</template>

<script>
    export default {
        name: "search-map",
        props:{
            initCanClick:{
                default:true
            }
        },
        watch:{
            initCanClick:{
                handler(val){
                     this.isCanClick = val
                },
                immediate:true
            }
        },
        data(){
            return {
                map:'',
                markers:[],
                markerObj:[],
                isCanClick:true,
            }
        },
        methods:{
            initData(){
                 this.initMap()
            },
            initMap(){
                const that = this
                return new Promise(resolve => {
                    const map = new AMap.Map("container", {
                        resizeEnable: true,
                        zoom: 13
                    });
                    //输入提示
                    let autoOptions = {
                        input: "tipinput"
                    };

                    AMap.plugin(['AMap.PlaceSearch','AMap.AutoComplete'], function(){
                        let auto = new AMap.AutoComplete(autoOptions);
                        let placeSearch = new AMap.PlaceSearch({
                            map: map
                        });  //构造地点查询类
                        auto.on("select", select);//注册监听，当选中某条记录时会触发
                        function select(e) {
                            placeSearch.setCity(e.poi.adcode);
                            placeSearch.search(e.poi.name);  //关键字查询查询
                        }
                    });
                    if(that.isCanClick){
                        map.on('click', function(e) {
                            let lng = e.lnglat.getLng()
                            let lat = e.lnglat.getLat()
                            that.markers = [{lng:lng,lat:lat}]
                            that.$emit('getSite',{lng:lng,lat:lat})
                            that.setMarks()
                        });
                    }
                    this.map = map
                    resolve(1)
                })
            },
            setMarks(){
                const map = this.map
                this.markerObj.map(it=>{
                    map.remove(it)
                })
                let mList = []
                this.markers.map((it,i)=>{
                    // let title = it.title
                    let marker = new AMap.Marker({
                        position: new AMap.LngLat(it.lng,it.lat),
                        offset: new AMap.Pixel(0,0),
                    });
                    marker.setLabel({
                        direction:'right',
                        offset: new AMap.Pixel(5, -20),
                        // content: "<div class='mark-label'>"+title+"</div>",
                    });
                    mList.push(marker)
                })
                this.markerObj = mList
                map.add(mList)
                //自适应中心点
                // 第一个参数为空，表明用图上所有覆盖物 setFitview
                // 第二个参数为false, 非立即执行
                // 第三个参数设置上左下右的空白
                map.setFitView(null, false, [150, 60, 100, 60]);
            },
            setStyle(){
                $('.amap-sug-result').css({"z-index":100000})
            }
        }
    }
</script>

<style lang="less" scoped>
    .map {
        height: 500px;
        position: relative;
    }
    #container {
        width: 100%;
        height: 100%;
    }
    .search-map {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 100000;
    }

    /deep/.amap-sug-result{
        z-index:100000 !important;
    }

</style>