vue使用高德地图的搜索地址和拖拽选址

1、引入高德地图方式-NPM

npm i @amap/amap-jsapi-loader --save

2、本人的经历是2.0版本是个**坑**，用默认的版本吧。

3、涉及组件：“AMap.Autocomplete”、‘misc/PositionPicker’“AMap.PlaceSearch”、‘AMap.Geocoder’，后面两个暂时没用到，是所搜点和地理转码的，代码部分没用没删除，反正复制粘贴可以直接跑。

//在vue的index.html中引入安全秘钥，官网有两种方式，我没服务器啥的用明文了


AMapLoader.load({
    "key": "",              // 申请好的Web端开发者Key，首次调用 load 时必填
    "version": "1.4.15",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    "plugins": [],           // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    "AMapUI": {             // 是否加载 AMapUI，缺省不加载
        "version": '1.1',   // AMapUI 缺省 1.1
        "plugins":[],       // 需要加载的 AMapUI ui插件
    },
    "Loca":{                // 是否加载 Loca， 缺省不加载
        "version": '1.3.2'  // Loca 版本，缺省 1.3.2
    },
}).then((AMap)=>{
    map = new AMap.Map('container');
}).catch(e => {
    console.log(e);
})

#all{
        position: relative;
    }
    #allmap{
        width: 100%;  height: calc(100%  - 50px);
        font-family: "微软雅黑";
    }
    .posInput{
        position: absolute;    z-index: 1;
        width: 80%;
        margin-top: 20px;  margin-left: 10%;
    }
    .posSubmit{
        position: absolute; z-index: 1; bottom: 0;
        margin-left: 5%;
        width: 90%;
        display: flex;  justify-content: flex-start; align-items: center;
    }
    .btn_box{
        width: 100%;
        height: 100%;
       display: flex;  ; align-items: center;
    }
    ::v-deep .el-form-item{
            margin-bottom: 0 !important;
    }