vue使用高德地图的搜索地址和拖拽选址前端vue.js高德地图

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

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

2、本人的经历是2.0版本是个**坑**，用默认的版本吧。
【vue使用高德地图的搜索地址和拖拽选址】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; }