map。。

<template>
  <div  @keyup.enter="search()">
      <img src="@/assets/img/weather.gif" alt="" style="position: fixed;top: 0;left: 0;width: 100vw;height: 100vh;opacity: 0.9;z-index: 997;display: none" class="xyt">
      <div id="bai-du-map"></div>
      <div style="position: fixed;top: 0">
          <el-input placeholder="请输入您的位置" v-model="value">
              <template slot="append"><el-button  icon="el-icon-position" @click="search()"><span>前往目的地</span></el-button></template>
          </el-input>
      </div>
      <span class="wind_style">
              <span>{{wind.weather}}</span>
              <span>温度：{{wind.temperature}}</span>
              <span>湿度：{{wind.humidity}}</span>
              <span>风向：{{wind.windDirection}}</span>
              <span>风速：{{wind.windPower}}</span>
        </span>
      <div style="height: 500px;overflow-y:auto;z-index: 200;position: fixed;top: 200px">
          <div v-show="show" style="height:28px;line-height: 28px;width: 100%;background-color: #00A4FF;text-align:center;fontSize:15px;color: #fff;">
              <span style="padding-right: 10px;letter-spacing:10px;font-weight: 600">大竹县档案馆欢迎您</span>
          </div>
          <div id="panel" style="width: 300px"></div>
      </div>
  </div>
</template>

<script>
    import AMapLoader from "@amap/amap-jsapi-loader";
    // 设置安全密钥
    window._AMapSecurityConfig = {
        securityJsCode: '安全密钥',
    }
    export default {
        data() {
            return {
                wind:{},
                show:false,
                fn:null,
                value:'',
                map: null,
                mouseTool: null,
                overlays: [],
                auto: null,
                placeSearch: null,
                path:[],
            }
        },
        mounted(){
            this.initMap();
        },
        methods: {
            search(){
                var points = [
                    { keyword: this.value,city:'达州' },
                    { keyword: '名称',city:'达州' }
                ]
                this.fn(points,this);
            },
            initMap() {
                AMapLoader.load({
                    "key": "e22436b3a32abef0d2cc90c5e703f91e",
                    "version": "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                    // "plugins": [地图用到的插件],           // 需要使用的的插件列表，如比例尺'AMap.Scale'等
                }).then((AMap) => {

                    this.path = [
                        new AMap.LngLat(107.215311,30.750674),
                        new AMap.LngLat(107.217296,30.750609),
                        new AMap.LngLat(107.217264,30.749595),
                        new AMap.LngLat(107.215386,30.749632),
                    ];
                    this.map = new AMap.Map('bai-du-map', {
                        mapStyle: 'amap://styles/fresh',
                        pitch:50,
                        viewMode:'3D',
                        terrain: true,
                        zoom: 17,
                        center: [107.209571,30.750102],
                        resizeEnable: true
                    });
                    var polyline = new AMap.Polygon({
                        path: this.path,
                        borderWeight: 2, // 线条宽度，默认为 1
                        strokeColor: '', // 线条颜色
                        lineJoin: 'round' // 折线拐点连接处样式
                    });
                    // var circle = new AMap.Circle({
                    //     center: new AMap.LngLat(107.216242,30.750178),  // 圆心位置
                    //     radius: 70, // 圆半径
                    //     fillColor: 'red',   // 圆形填充颜色
                    //     strokeColor: '#fff', // 描边颜色
                    //     strokeWeight: 2, // 描边宽度
                    // });
                    this.map.add(polyline);
                    var marker = new AMap.Marker({
                        position: new AMap.LngLat(107.216242,30.750178),
                        title: '名称'
                    });
                    this.map.add(marker);
                    AMap.plugin([
                        'AMap.ToolBar',
                        'AMap.Scale',
                        'AMap.MapType',
                        'AMap.Driving',
                        'AMap.Weather'
                    ], ()=>{
                        this.map.addControl(new AMap.ToolBar());
                        this.map.addControl(new AMap.Scale());
                        this.map.addControl(new AMap.MapType());
                        var driving = new AMap.Driving({
                            panel: document.querySelector('#panel'),
                            policy: AMap.DrivingPolicy.LEAST_TIME,
                            map: this.map,
                        })
                        var weather = new AMap.Weather();
                        let that=this;
                        weather.getLive('达州市', function(err, data) {
                            console.log(err, data);
                            that.wind=data;
                             if(data.weather.includes('雨')){
                                 let dom=document.querySelector('.xyt');
                                 dom.style.display="inline-block";
                                 setTimeout(()=>{
                                     dom.style.display="none";
                                 },2000)
                             };

                        });
                        this.fn=(points,that)=>{

                            driving.search(points, function (status, result) {
                                that.$nextTick(()=>{
                                    setTimeout(()=>{
                                        that.show=true;
                                    })
                                })
                            })
                        }

                    });
                    var content = [
                        "<div>" +
                        "<b>名称</b>",
                        "电话 : 电话 ",
                        "地址 :地址</div>" +
                        "</div>"
                ];

                    var infoWindow = new AMap.InfoWindow({
                        content: content.join("<br>"),  //传入 dom 对象，或者 html 字符串
                        anchor: 'bottom-center',
                        offset: new AMap.Pixel(0, -30)
                    });
                    var open=()=>{
                        infoWindow.open(this.map, [107.216242,30.750178])
                    }
                    marker.on('click', open);
                    open();
                }).catch(e => {
                    console.log(e);
                });
            }
        },
    };
</script>

<style scoped lang="scss">
    .wind_style{
        position: absolute;
        top: 20px;
        right: 120px;
        padding-left: 700px;
        font-size: 20px;
        font-weight: 600;
        color: #fff;
        span{
            padding-right: 20px;
        }
    }
    #bai-du-map {
        overflow: hidden;
        width: 100%;
        height: 100vh;
        margin: 0;
        font-family: "微软雅黑";
    }
    .el-input{
        margin-left: 50px;
        margin-top: 10px;
        width: 600px;
        border-radius: 8px;
        /deep/.el-input-group__append{
            border: none !important;
            background-color: transparent !important;
        }
        .el-button{
            border-bottom-left-radius: 0px;
            border-top-left-radius: 0px;
            outline: none;
            width: 130px;
            height: 48px;
            display: flex;
            align-items: center;
            padding: 12px 5px;
            background: #00A4FF;
            span{
                font-size: 16px !important;
                color: #fff;
                margin-left: 4px;
            }
            /deep/.el-icon-position{
                font-size: 24px !important;
                color: #fff;
            }
        }
        /deep/.el-input__inner{
            font-size: 16px;
            height: 48px;
            background: #FFFFFF;
        }
    }
</style>
<style>
    /* 隐藏高德logo  */
    .amap-logo {
        display: none !important;
    }
    /* 隐藏高德版权  */
    .amap-copyright {
        display: none !important;
    }
    .amap-call{
        display: none;
    }
</style>