Vue2（vue-amap） 最新高德地图获取坐标与地点信息＋搜索功能 ...

效果

第一步:首先我们先去高德地图开放平台申请一个Key

第二步:
需要安装地图插件

1. npm install vue-amap --save

复制代码

第三步:

1. // 引入vue-amap
2. import VueAMap from 'vue-amap'
3. Vue.use(VueAMap)
4. VueAMap.initAMapApiLoader({
5.   key: '你的Key',  // key
6.   plugin: [
7.   'AMap.Geolocation',  //定位空间，用来获取和展示用户主机所在的经纬度位置
8.     ' AMap.Autocomplete ',  //输入提示插件
9.     ' AMap.PlaceSearch ', //POI搜索插件
10.     ' AMap.Scale ',   //右下角缩略图插件，比例尺
11.     ' AMap.OverView ', //地图鹰眼插件
12.     ' AMap.ToolBar ',  //地图工具条
13.     ' AMap.MapType ',  //类别切换空间，实现默认图层与卫星图，实施交通层之间切换的控制
14.     ' AMap.PolyEditor ', //编辑 折线多边形
15.     ' AMap.CircleEditor ',
16.     "AMap.Geocoder",     //地图编码
17.    'AMap.AMapManager',
18.    'AMap.Marker'
19.   ],
20.   // 高德 sdk 版本，默认为 1.4.4
21.   v: '1.4.4',
22.   uiVersion: '1.0' //ui版本
23. })
24. //高德的安全密钥
25. window._AMapSecurityConfig = {
26.   securityJsCode: '你的密钥',
27. }

复制代码

添加标签

1.               <div style="border: 1px solid #cccccc">
2.                   <!-- //搜索框 -->
3.                   <el-amap-search-box
4.                     id="search"
5.                     :search-option="searchOption"
6.                     :on-search-result="onSearchResult"
7.                   />
8.                   <!-- 地图 -->
9.                   <el-amap
10.                     class="amap-box"
11.                     :zoom="amap.zoom"
12.                     :center="amap.center"
13.                     :plugin="amap.plugin"
14.                     :events="amap.events"
15.                   >
16.                     <!-- 当前位置图标 -->
17.                     <el-amap-marker
18.                       v-for="(marker, index) in amap.markers"
19.                       :key="'marker' + index"
20.                       :position="marker.position"
21.                     />
22.                     <!-- 位置名称显示 -->
23.                     <el-amap-text
24.                       v-for="(marker, index) in amap.markers"
25.                       :key="'text' + index"
26.                       :text="marker.text"
27.                       :offset="marker.offset"
28.                       :position="marker.position"
29.                     />
30.                   </el-amap>
31.                 </div>

复制代码

数据源:

2. export default {
3.   name: "vehicleSpotInspection",
4.   data() {
5.     const vm = this;
6.     return {
7.       address: "",//需要传给后端的字段
8.       // form对象
9.       dataForm: getFormData(),
10.       // 地图搜索对象
11.       searchOption: {
12.         city: "全国",
13.         citylimit: true,
14.       },
15.       lng: 0,
16.       lat: 0,
17.       // 地图对象
18.       amap: {
19.         zoom: 16,
20.         center: [116.319802, 39.98294],
21.         events: {
22.           // 点击获取地址的数据
23.           click(e) {
24.             const { lng, lat } = e.lnglat;
25.             vm.dataForm.lon = lng;
26.             vm.dataForm.lat = lat;
27.             // 这里通过高德 SDK 完成。
28.             var geocoder = new AMap.Geocoder({
29.               radius: 100,
30.               extensions: "all",
31.             });
32.             geocoder.getAddress([lng, lat], function (status, result) {
33.               if (status === "complete" && result.info === "OK") {
34.                 if (result && result.regeocode) {
35.                   console.log("点击获取地址的数据", result);
36.                   vm.dataForm.orgAddr = result.regeocode.formattedAddress;
37.                   vm.dataForm.province =
38.                     result.regeocode.addressComponent.province;
39.                   vm.dataForm.city = result.regeocode.addressComponent.city;
40.                   vm.dataForm.district =
41.                     result.regeocode.addressComponent.district;
42.                   vm.dataForm.lat = lat ? lat.toString() : "";
43.                   vm.dataForm.lon = lng ? lng.toString() : "";
44.                   vm.amap.markers = [];
45.                   const obj = {
46.                     position: [lng, lat],
47.                     text: result.regeocode.formattedAddress,
48.                     offset: [0, 30],
49.                   };
50.                   vm.amap.markers.push(obj);
51.                   vm.sure();
52.                 }
53.               }
54.             });
55.             // this.$nextTick().then(() => {
56.             //           // 在这里执行你需要在 DOM 更新后执行的代码
57.             //         });
58.           },
59.         },
61.         plugin: [
62.           {
63.             // 定位
64.             pName: "Geolocation",
65.             events: {
66.               init(o) {
67.                 // o是高德地图定位插件实例
68.                 o.getCurrentPosition((status, result) => {
69.                   console.log("定位：", result);
70.                   if (result && result.position) {
71.                     // 设置经度
72.                     vm.lng = result.position.lng;
73.                     // 设置维度
74.                     vm.lat = result.position.lat;
75.                     vm.address = result.formattedAddress; //获取具体位置
76.                     console.log("定位address", vm.address);
77.                     // 设置坐标
78.                     vm.amap.center = [vm.lng, vm.lat];
79.                     let op = {
80.                       position: [vm.lng, vm.lat, vm.address],
81.                       text: vm.address, //提交之后显示的位置
82.                       offset: [0, 30],
83.                     };
84.                     vm.amap.markers.push(op);
85.                     // 页面渲染好后
86.                     // this.$nextTick().then(() => {
87.                     //   // 在这里执行你需要在 DOM 更新后执行的代码
88.                     // });
89.                   }
90.                 });
91.               },
92.             },
93.           },
94.         ],
95.         //
96.         markers: [],
97.       },
98.     };
100.   },

复制代码

方法:

1. // 点击获取地址的数据
2.     // 地图点击事件处理函数
3.     onMapClick(e) {
4.       const { lng, lat } = e.lnglat;
5.       // 更新数据属性
6.       this.dataForm.lon = lng;
7.       this.dataForm.lat = lat;
9.       // 使用 this.$amap 创建 Geocoder 实例
10.       var geocoder = new this.$amap.Geocoder({
11.         radius: 100,
12.         extensions: "all",
13.       });
14.       geocoder.getAddress([lng, lat], (status, result) => {
15.         if (status === "complete" && result.info === "OK") {
16.           if (result && result.regeocode) {
17.             console.log("点击获取地址的数据", result);
18.             this.dataForm.orgAddr = result.regeocode.formattedAddress;
19.             this.dataForm.province = result.regeocode.addressComponent.province;
20.             this.dataForm.city = result.regeocode.addressComponent.city;
21.             this.dataForm.district = result.regeocode.addressComponent.district;
22.             this.dataForm.lat = lat.toString();
23.             this.dataForm.lon = lng.toString();
25.             // 更新标记
26.             this.amap.markers = [
27.               {
28.                 position: [lng, lat],
29.                 text: result.regeocode.formattedAddress,
30.                 offset: [0, 30],
31.               },
32.             ];
34.             // 调用其他方法，例如 sure()
35.             this.sure();
36.           }
37.         }
38.       });
39.     },
40.     // 地图搜索回调
41.     onSearchResult(pois) {
42.       const vm = this;
43.       vm.amap.markers = [];
44.            // 根据是否有搜索结果来启用或禁用搜索框
45.            this.searchDisabled = pois && pois.length === 0;
46.       let latSum = 0;
47.       let lngSum = 0;
48.       console.log("地图回调", pois);
49.       if (pois.length > 0) {
50.         pois.forEach((poi, index) => {
51.           const { lng, lat } = poi;
52.           if (index === 0) {
53.             lngSum = lng;
54.             latSum = lat;
55.             const obj = {
56.               position: [poi.lng, poi.lat],
57.               text: poi.name,
58.               offset: [0, 30],
59.             };
60.             vm.amap.markers.push(obj);
61.             console.log("地图搜索回调", poi);
62.             vm.dataForm.orgAddr = poi.name;
63.             vm.dataForm.lat = poi.lat ? poi.lat.toString() : "";
64.             vm.dataForm.lon = poi.lng ? poi.lng.toString() : "";
65.           }
66.         });
67.         vm.amap.center = [lngSum, latSum];
68.       }
69.     },
70.     // 定位成功后更新位置信息的函数
71.     updateLocationInfo(position) {
72.       this.dataForm.lat = position.lat;
73.       this.dataForm.lng = position.lng;
74.       this.dataForm.orgAddr = position.formattedAddress; // position 对象中有 formattedAddress 属性
75.       console.log("更新位置", this.dataForm);
76.       // 更新地图中心点和标记
77.       this.amap.center = [this.dataForm.lng, this.dataForm.lat];
78.       this.amap.markers = [
79.         {
80.           position: [this.dataForm.lng, this.dataForm.lat],
81.           text: this.address,//这里改成后台提供的字段可以提交给后台
82.           offset: [0, 30],
83.         },
84.       ];
85.     },
86.     // 提交方法
87.     sure() {
88.       const vm = this;
89.       console.log(this.amap.markers);
90.       this.$emit("updateLocation", vm.dataForm);
91.     },

复制代码

碰到的问题:1.有的可能会提示 找不到AMap模块 可以引入 import AMap from 'AMap'

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。