耀极客论坛

 找回密码
 立即注册
查看: 698|回复: 0

vue-amap安装和用法步骤

[复制链接]

336

主题

318

帖子

22万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
220555
发表于 2022-5-8 02:37:17 | 显示全部楼层 |阅读模式
  vue-amap是饿了么开源的一套基于 Vue 2.0 和高德地图的地图组件。接下来通过本文给大家介绍vue-amap安装和使用,需要的朋友可以参考下
  之前分享了异步加载高德地图api的用法,现在记录一下vue-amap的用法。
  vue-amap是饿了么开源的一套基于 Vue 2.0 和高德地图的地图组件。 数据状态与地图状态单向绑定,开发者无需关心地图的具体操作。
  官方文档:https://elemefe.github.io/vue-amap/
步骤如下:
  1.npm 安装
  1. npm install vue-amap --save
复制代码
  如果是CDN方式,目前可通过unpkg.com/vue-amap获取最新版本的资源。
  1. ‹script src="https://unpkg.com/vue-amap/dist/index.js">‹/script>
复制代码
  2.使用实例
  实例需求描述:搜索并选择地址,选中后地图定位到该地址,并获取经纬度自动填入下方的输入框中。

  注:实例中使用的框架是ElementUI,其表单组件使用比较方便。
实现步骤:
  (1)安装后在main.js中设置以下内容:
  1. import VueAMap from "vue-amap";
  2. Vue.use(VueAMap);
  3. // 初始化vue-amap
  4. VueAMap.initAMapApiLoader({
  5.   key: "your key", // 这里写你申请的高德地图的key
  6.   plugin: ["AMap.Autocomplete", "AMap.Geocoder", "AMap.Geolocation"],
  7.   v: "1.4.15",
  8.   uiVersion: "1.1"
  9. });
复制代码
  (2)定义地图搜索组件 base/mapSearch/baseMapSearch.vue
  1. ‹template>
  2.   ‹div>
  3.     ‹div class="search-box">
  4.       ‹el-input
  5.         v-model="searchKey"
  6.         type="search"
  7.         id="search"
  8.         placeholder="请输入详细地址"
  9.       >‹/el-input>
  10.       ‹!--‹button @click="searchByHand">搜索‹/button>-->
  11.       ‹div class="tip-box" id="searchTip">‹/div>
  12.     ‹/div>
  13.     ‹!--
  14.       amap-manager: 地图管理对象
  15.       vid:地图容器节点的ID
  16.       zooms: 地图显示的缩放级别范围,在PC上,默认范围[3,18],取值范围[3-18];在移动设备上,默认范围[3-19],取值范围[3-19]
  17.       center: 地图中心点坐标值
  18.       plugin:地图使用的插件
  19.       events: 事件
  20.     -->
  21.     ‹div class="amap-box">
  22.       ‹el-amap
  23.         :amap-manager="amapManager"
  24.         :vid="'amap-vue'"
  25.         :zoom="zoom"
  26.         :plugin="plugin"
  27.         :center="center"
  28.         :events="events"
  29.       >
  30.         ‹!-- 标记 -->
  31.         ‹el-amap-marker
  32.           v-for="(marker, index) in markers"
  33.           :position="marker"
  34.           :key="index"
  35.         >‹/el-amap-marker>
  36.       ‹/el-amap>
  37.     ‹/div>
  38.   ‹/div>
  39. ‹/template>
  40. ‹script>
  41. import { AMapManager, lazyAMapApiLoaderInstance } from "vue-amap";
  42. let amapManager = new AMapManager();
  43. export default {
  44.   props: ["city", "value", "longitude", "latitude", "isEdit"],
  45.   data() {
  46.     let self = this;
  47.     return {
  48.       address: null,
  49.       searchKey: "",
  50.       amapManager,
  51.       markers: [],
  52.       searchOption: {
  53.         city: this.city ? this.city : "全国",
  54.         citylimit: true
  55.       },
  56.       center: [121.329402, 31.228667],
  57.       zoom: 17,
  58.       lng: 0,
  59.       lat: 0,
  60.       loaded: false,
  61.       events: {
  62.         init() {
  63.           lazyAMapApiLoaderInstance.load().then(() => {
  64.             self.initSearch();
  65.           });
  66.         },
  67.         // 点击获取地址的数据
  68.         click(e) {
  69.           self.markers = [];
  70.           let { lng, lat } = e.lnglat;
  71.           self.lng = lng;
  72.           self.lat = lat;
  73.           self.center = [lng, lat];
  74.           self.markers.push([lng, lat]);
  75.           // 这里通过高德 SDK 完成。
  76.           let geocoder = new AMap.Geocoder({
  77.             radius: 1000,
  78.             extensions: "all"
  79.           });
  80.           geocoder.getAddress([lng, lat], function(status, result) {
  81.             if (status === "complete" && result.info === "OK") {
  82.               if (result && result.regeocode) {
  83.                 self.address = result.regeocode.formattedAddress;
  84.                 self.searchKey = result.regeocode.formattedAddress;
  85.                 self.$emit("updateLocation", lng, lat, self.searchKey);
  86.                 self.$nextTick();
  87.               }
  88.             }
  89.           });
  90.         }
  91.       },
  92.       // 一些工具插件
  93.       plugin: [
  94.         {
  95.           // 定位
  96.           pName: "Geolocation",
  97.           events: {
  98.             init(o) {
  99.               // o是高德地图定位插件实例
  100.               o.getCurrentPosition((status, result) => {
  101.                 if (result && result.position) {
  102.                   if (self.isEdit) {
  103.                     // 设置经度
  104.                     self.lng = self.longitude;
  105.                     // 设置维度
  106.                     self.lat = self.latitude;
  107.                     // 设置坐标
  108.                     self.center = [self.longitude, self.latitude];
  109.                     self.markers.push([self.longitude, self.latitude]);
  110.                   } else {
  111.                     // 设置经度
  112.                     self.lng = result.position.lng;
  113.                     // 设置维度
  114.                     self.lat = result.position.lat;
  115.                     // 设置坐标
  116.                     self.center = [self.lng, self.lat];
  117.                     self.markers.push([self.lng, self.lat]);
  118.                   }
  119.                   // load
  120.                   self.loaded = true;
  121.                   // 页面渲染好后
  122.                   self.$nextTick();
  123.                 }
  124.               });
  125.             }
  126.           }
  127.         }
  128.       ]
  129.     };
  130.   },
  131.   created() {
  132.     if (this.value) {
  133.       this.searchKey = this.value;
  134.       this.address = this.value;
  135.     }
  136.     if (this.longitude && this.latitude) {
  137.       this.lng = this.longitude;
  138.       this.lat = this.latitude;
  139.       this.center = [this.longitude, this.latitude];
  140.       this.markers.push([this.longitude, this.latitude]);
  141.     }
  142.   },
  143.   methods: {
  144.     // 选择地址后自动定位到当前地址附近
  145.     updateAddress(value, longitude, latitude) {
  146.       this.searchKey = value;
  147.       this.address = value;
  148.       this.lng = longitude;
  149.       this.lat = latitude;
  150.       this.center = [longitude, latitude];
  151.       this.markers.push([longitude, latitude]);
  152.     },
  153.     initSearch() {
  154.       let vm = this;
  155.       let map = this.amapManager.getMap();
  156.       AMapUI.loadUI(["misc/PoiPicker"], function(PoiPicker) {
  157.         let poiPicker = new PoiPicker({
  158.           input: "search",
  159.           placeSearchOptions: {
  160.             map: map,
  161.             pageSize: 10
  162.           },
  163.           suggestContainer: "searchTip",
  164.           searchResultsContainer: "searchTip"
  165.         });
  166.         vm.poiPicker = poiPicker;
  167.         // 监听poi选中信息
  168.         poiPicker.on("poiPicked", function(poiResult) {
  169.           let source = poiResult.source;
  170.           let poi = poiResult.item;
  171.           if (source !== "search") {
  172.             poiPicker.searchByKeyword(poi.name);
  173.           } else {
  174.             poiPicker.clearSearchResults();
  175.             vm.markers = [];
  176.             let lng = poi.location.lng;
  177.             let lat = poi.location.lat;
  178.             let address = poi.name; // poi.cityname + poi.adname + poi.name
  179.             vm.center = [lng, lat];
  180.             vm.markers.push([lng, lat]);
  181.             vm.lng = lng;
  182.             vm.lat = lat;
  183.             vm.address = address;
  184.             vm.searchKey = address;
  185.             vm.$emit("updateLocation", lng, lat, vm.searchKey);
  186.           }
  187.         });
  188.       });
  189.     },
  190.     searchByHand() {
  191.       if (this.searchKey !== "" && this.poiPicker) {
  192.         this.poiPicker.searchByKeyword(this.searchKey);
  193.       }
  194.     }
  195.   }
  196. };
  197. ‹/script>
  198. ‹style lang="stylus">
  199. .search-box {
  200.   margin-top: 6px;
  201.   width: 100%;
  202. }
  203. .search-box input {
  204.   padding: 0 15px;
  205.   width: 100%;
  206.   height: 32px;
  207.   line-height: 32px;
  208.   color: #606266;
  209.   border: 1px solid #dcdfe6;
  210.   border-radius: 4px;
  211. }
  212. .search-box input:focus {
  213.   border-color: #409eff;
  214.   outline: 0;
  215. }
  216. .search-box input::-webkit-input-placeholder {
  217.   color: #c0c4cc;
  218. }
  219. .tip-box {
  220.   width: 100%;
  221.   max-height:280px;
  222.   position: absolute;
  223.   top: 72px;
  224.   z-index: 10000;
  225.   overflow-y: auto;
  226.   background-color: #fff;
  227. }
  228. ‹/style>
  229. ‹style>
  230. .amap-ui-poi-picker-sugg,
  231. .amap_lib_placeSearch {
  232.   border: 1px solid #eee;
  233.   border-radius: 4px;
  234. }
  235. .amap-box {
  236.   height: 200px;
  237. }
  238. ‹/style>
复制代码
  这里样式使用了stylus,可自行转换其他样式。
  (3)在组件中使用地图搜索组件,这里以弹窗为例
  1. ‹template>
  2.   ‹el-dialog
  3.     :title="title"
  4.     :visible.sync="visible"
  5.     :before-close="handleClose"
  6.     width="600px"
  7.     append-to-body
  8.     :close-on-click-modal="false"
  9.     :close-on-press-escape="false"
  10.   >
  11.     ‹div class="form-info">
  12.       ‹el-form
  13.         :model="form"
  14.         ref="form"
  15.         :rules="rules"
  16.         size="small"
  17.         label-width="110px"
  18.       >
  19.         ‹el-form-item label="选择地址" prop="address">
  20.           ‹base-map-search
  21.             ref="mapSearch"
  22.             :city="form.city"
  23.             :value="form.address"
  24.             :longitude="form.addLon"
  25.             :latitude="form.addLat"
  26.             :isEdit="isEdit"
  27.             @updateLocation="updateLocation"
  28.           />
  29.         ‹/el-form-item>
  30.         ‹el-row>
  31.           ‹el-col :span="12">
  32.             ‹el-form-item prop="addLon" label="经度">
  33.               ‹el-input
  34.                 v-model.number="form.addLon"
  35.                 :maxlength="15"
  36.                 placeholder="请输入经度"
  37.               >‹/el-input>
  38.             ‹/el-form-item>
  39.           ‹/el-col>
  40.           ‹el-col :span="12" class="right-label-form-item">
  41.             ‹el-form-item prop="addLat" label="纬度">
  42.               ‹el-input
  43.                 v-model.number="form.addLat"
  44.                 :maxlength="15"
  45.                 placeholder="请输入纬度"
  46.               >‹/el-input>
  47.             ‹/el-form-item>
  48.           ‹/el-col>
  49.         ‹/el-row>
  50.       ‹/el-form>
  51.     ‹/div>
  52.   ‹/el-dialog>
  53. ‹/template>
  54. ‹script>
  55. import BaseMapSearch from "../base/mapSearch/baseMapSearch";
  56. export default {
  57.     props: ["visible", "isEdit", "detail"],
  58.     components: {
  59.       BaseMapSearch
  60.     },
  61.     data() {
  62.         return {
  63.             title: "添加地址",
  64.             form: {
  65.                 address: "",
  66.                 addLon: "",
  67.                 addLat: ""
  68.             },
  69.             rules: {
  70.                 address: [
  71.                   {
  72.                     required: true,
  73.                     message: "请输入地址",
  74.                     trigger: ["blur", "change"]
  75.                   }
  76.                 ],
  77.                 addLat: [
  78.                   {
  79.                     required: true,
  80.                     message: "请输入纬度",
  81.                     trigger: ["blur", "change"]
  82.                   }
  83.                 ],
  84.                 addLon: [
  85.                   {
  86.                     required: true,
  87.                     message: "请输入经度",
  88.                     trigger: ["blur", "change"]
  89.                   }
  90.                 ],
  91.             }
  92.         };
  93.     },
  94.     created() {
  95.       if (this.isEdit) {
  96.         this.initForm();
  97.       }
  98.     },
  99.     methods: {
  100.         // 初始化表单
  101.         initForm() {
  102.           this.title = "修改地址";
  103.           if (this.detail) {
  104.             this.form = { ...this.detail };
  105.           }
  106.         },
  107.         // 地图搜索选址
  108.         updateLocation(lng, lat, address) {
  109.           this.form.addLon = lng;
  110.           this.form.addLat = lat;
  111.           this.form.address = address;
  112.         },
  113.         handleClose() {
  114.           this.$emit("update:visible", false);
  115.         }
  116.     }
  117. };
  118. ‹/script>
复制代码
  (4)这时,如果项目中使用了ESlint,会报AMap、AMapUI未定义的错误,我们需要在.eslintrc.js文件中定义globals属性:
  1. module.exports = {
  2.     // ...
  3.     globals: {
  4.       AMap: false,
  5.       AMapUI: false
  6.     }
  7. };
复制代码
  这样就写好了,效果如图:

  到此这篇关于vue-amap安装和使用的文章就介绍到这了,更多相关vue-amap安装和使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|耀极客论坛 ( 粤ICP备2022052845号-2 )|网站地图

GMT+8, 2022-12-10 02:36 , Processed in 0.065899 second(s), 20 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表