欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue-amap安裝和用法步驟

 更新時間:2021年12月23日 15:28:33   作者:Lena_葉  
vue-amap是餓了么開源的一套基于?Vue?2.0?和高德地圖的地圖組件。接下來通過本文給大家介紹vue-amap安裝和使用,需要的朋友可以參考下

之前分享了異步加載高德地圖api的用法,現(xiàn)在記錄一下vue-amap的用法。

vue-amap是餓了么開源的一套基于 Vue 2.0 和高德地圖的地圖組件。 數(shù)據(jù)狀態(tài)與地圖狀態(tài)單向綁定,開發(fā)者無需關心地圖的具體操作。

官方文檔:https://elemefe.github.io/vue-amap/

步驟如下:

1.npm 安裝

npm install vue-amap --save

如果是CDN方式,目前可通過unpkg.com/vue-amap獲取最新版本的資源。

<script src="https://unpkg.com/vue-amap/dist/index.js"></script>

2.使用實例

實例需求描述:搜索并選擇地址,選中后地圖定位到該地址,并獲取經(jīng)緯度自動填入下方的輸入框中。

注:實例中使用的框架是ElementUI,其表單組件使用比較方便。

實現(xiàn)步驟:

(1)安裝后在main.js中設置以下內(nèi)容:

import VueAMap from "vue-amap";
Vue.use(VueAMap);
// 初始化vue-amap
VueAMap.initAMapApiLoader({
  key: "your key", // 這里寫你申請的高德地圖的key
  plugin: ["AMap.Autocomplete", "AMap.Geocoder", "AMap.Geolocation"],
  v: "1.4.15",
  uiVersion: "1.1"
});

(2)定義地圖搜索組件 base/mapSearch/baseMapSearch.vue

<template>
  <div>
    <div class="search-box">
      <el-input
        v-model="searchKey"
        type="search"
        id="search"
        placeholder="請輸入詳細地址"
      ></el-input>
      <!--<button @click="searchByHand">搜索</button>-->
      <div class="tip-box" id="searchTip"></div>
    </div>
    <!--
      amap-manager: 地圖管理對象
      vid:地圖容器節(jié)點的ID
      zooms: 地圖顯示的縮放級別范圍,在PC上,默認范圍[3,18],取值范圍[3-18];在移動設備上,默認范圍[3-19],取值范圍[3-19]
      center: 地圖中心點坐標值
      plugin:地圖使用的插件
      events: 事件
    -->
    <div class="amap-box">
      <el-amap
        :amap-manager="amapManager"
        :vid="'amap-vue'"
        :zoom="zoom"
        :plugin="plugin"
        :center="center"
        :events="events"
      >
        <!-- 標記 -->
        <el-amap-marker
          v-for="(marker, index) in markers"
          :position="marker"
          :key="index"
        ></el-amap-marker>
      </el-amap>
    </div>
  </div>
</template>
<script>
import { AMapManager, lazyAMapApiLoaderInstance } from "vue-amap";
let amapManager = new AMapManager();
export default {
  props: ["city", "value", "longitude", "latitude", "isEdit"],
  data() {
    let self = this;
    return {
      address: null,
      searchKey: "",
      amapManager,
      markers: [],
      searchOption: {
        city: this.city ? this.city : "全國",
        citylimit: true
      },
      center: [121.329402, 31.228667],
      zoom: 17,
      lng: 0,
      lat: 0,
      loaded: false,
      events: {
        init() {
          lazyAMapApiLoaderInstance.load().then(() => {
            self.initSearch();
          });
        },
        // 點擊獲取地址的數(shù)據(jù)
        click(e) {
          self.markers = [];
          let { lng, lat } = e.lnglat;
          self.lng = lng;
          self.lat = lat;
          self.center = [lng, lat];
          self.markers.push([lng, lat]);
          // 這里通過高德 SDK 完成。
          let geocoder = new AMap.Geocoder({
            radius: 1000,
            extensions: "all"
          });
          geocoder.getAddress([lng, lat], function(status, result) {
            if (status === "complete" && result.info === "OK") {
              if (result && result.regeocode) {
                self.address = result.regeocode.formattedAddress;
                self.searchKey = result.regeocode.formattedAddress;
                self.$emit("updateLocation", lng, lat, self.searchKey);
                self.$nextTick();
              }
            }
          });
        }
      },
      // 一些工具插件
      plugin: [
        {
          // 定位
          pName: "Geolocation",
          events: {
            init(o) {
              // o是高德地圖定位插件實例
              o.getCurrentPosition((status, result) => {
                if (result && result.position) {
                  if (self.isEdit) {
                    // 設置經(jīng)度
                    self.lng = self.longitude;
                    // 設置維度
                    self.lat = self.latitude;
                    // 設置坐標
                    self.center = [self.longitude, self.latitude];
                    self.markers.push([self.longitude, self.latitude]);
                  } else {
                    // 設置經(jīng)度
                    self.lng = result.position.lng;
                    // 設置維度
                    self.lat = result.position.lat;
                    // 設置坐標
                    self.center = [self.lng, self.lat];
                    self.markers.push([self.lng, self.lat]);
                  }
                  // load
                  self.loaded = true;
                  // 頁面渲染好后
                  self.$nextTick();
                }
              });
            }
          }
        }
      ]
    };
  },
  created() {
    if (this.value) {
      this.searchKey = this.value;
      this.address = this.value;
    }
    if (this.longitude && this.latitude) {
      this.lng = this.longitude;
      this.lat = this.latitude;
      this.center = [this.longitude, this.latitude];
      this.markers.push([this.longitude, this.latitude]);
    }
  },
  methods: {
    // 選擇地址后自動定位到當前地址附近
    updateAddress(value, longitude, latitude) {
      this.searchKey = value;
      this.address = value;
      this.lng = longitude;
      this.lat = latitude;
      this.center = [longitude, latitude];
      this.markers.push([longitude, latitude]);
    },
    initSearch() {
      let vm = this;
      let map = this.amapManager.getMap();
      AMapUI.loadUI(["misc/PoiPicker"], function(PoiPicker) {
        let poiPicker = new PoiPicker({
          input: "search",
          placeSearchOptions: {
            map: map,
            pageSize: 10
          },
          suggestContainer: "searchTip",
          searchResultsContainer: "searchTip"
        });
        vm.poiPicker = poiPicker;
        // 監(jiān)聽poi選中信息
        poiPicker.on("poiPicked", function(poiResult) {
          let source = poiResult.source;
          let poi = poiResult.item;
          if (source !== "search") {
            poiPicker.searchByKeyword(poi.name);
          } else {
            poiPicker.clearSearchResults();
            vm.markers = [];
            let lng = poi.location.lng;
            let lat = poi.location.lat;
            let address = poi.name; // poi.cityname + poi.adname + poi.name
            vm.center = [lng, lat];
            vm.markers.push([lng, lat]);
            vm.lng = lng;
            vm.lat = lat;
            vm.address = address;
            vm.searchKey = address;
            vm.$emit("updateLocation", lng, lat, vm.searchKey);
          }
        });
      });
    },
    searchByHand() {
      if (this.searchKey !== "" && this.poiPicker) {
        this.poiPicker.searchByKeyword(this.searchKey);
      }
    }
  }
};
</script>
<style lang="stylus">
.search-box {
  margin-top: 6px;
  width: 100%;
}
.search-box input {
  padding: 0 15px;
  width: 100%;
  height: 32px;
  line-height: 32px;
  color: #606266;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}
.search-box input:focus {
  border-color: #409eff;
  outline: 0;
}
.search-box input::-webkit-input-placeholder {
  color: #c0c4cc;
}
.tip-box {
  width: 100%;
  max-height:280px;
  position: absolute;
  top: 72px;
  z-index: 10000;
  overflow-y: auto;
  background-color: #fff;
}
</style>
<style>
.amap-ui-poi-picker-sugg,
.amap_lib_placeSearch {
  border: 1px solid #eee;
  border-radius: 4px;
}
.amap-box {
  height: 200px;
}
</style>

這里樣式使用了stylus,可自行轉(zhuǎn)換其他樣式。

(3)在組件中使用地圖搜索組件,這里以彈窗為例

<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    :before-close="handleClose"
    width="600px"
    append-to-body
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <div class="form-info">
      <el-form
        :model="form"
        ref="form"
        :rules="rules"
        size="small"
        label-width="110px"
      >
        <el-form-item label="選擇地址" prop="address">
          <base-map-search
            ref="mapSearch"
            :city="form.city"
            :value="form.address"
            :longitude="form.addLon"
            :latitude="form.addLat"
            :isEdit="isEdit"
            @updateLocation="updateLocation"
          />
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="addLon" label="經(jīng)度">
              <el-input
                v-model.number="form.addLon"
                :maxlength="15"
                placeholder="請輸入經(jīng)度"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="right-label-form-item">
            <el-form-item prop="addLat" label="緯度">
              <el-input
                v-model.number="form.addLat"
                :maxlength="15"
                placeholder="請輸入緯度"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </el-dialog>
</template>
<script>
import BaseMapSearch from "../base/mapSearch/baseMapSearch";
export default {
    props: ["visible", "isEdit", "detail"],
    components: {
      BaseMapSearch
    },
    data() {
        return {
            title: "添加地址",
            form: {
                address: "",
                addLon: "",
                addLat: ""
            },
            rules: {
                address: [
                  {
                    required: true,
                    message: "請輸入地址",
                    trigger: ["blur", "change"]
                  }
                ],
                addLat: [
                  {
                    required: true,
                    message: "請輸入緯度",
                    trigger: ["blur", "change"]
                  }
                ],
                addLon: [
                  {
                    required: true,
                    message: "請輸入經(jīng)度",
                    trigger: ["blur", "change"]
                  }
                ],
            }
        };
    },
    created() {
      if (this.isEdit) {
        this.initForm();
      }
    },
    methods: {
        // 初始化表單
        initForm() {
          this.title = "修改地址";
          if (this.detail) {
            this.form = { ...this.detail };
          }
        },
        // 地圖搜索選址
        updateLocation(lng, lat, address) {
          this.form.addLon = lng;
          this.form.addLat = lat;
          this.form.address = address;
        },
        handleClose() {
          this.$emit("update:visible", false);
        }
    }
};
</script>

(4)這時,如果項目中使用了ESlint,會報AMap、AMapUI未定義的錯誤,我們需要在.eslintrc.js文件中定義globals屬性:

module.exports = {
    // ...
    globals: {
      AMap: false,
      AMapUI: false
    }
};

這樣就寫好了,效果如圖:

到此這篇關于vue-amap安裝和使用的文章就介紹到這了,更多相關vue-amap安裝和使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!

相關文章

  • 基于vue、react實現(xiàn)倒計時效果

    基于vue、react實現(xiàn)倒計時效果

    這篇文章主要為大家詳細介紹了基于vue、react實現(xiàn)倒計時效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2019-08-08
  • axios在Vue3中的使用實例代碼

    axios在Vue3中的使用實例代碼

    Axios是一個基于Promise的HTTP客戶端,用于瀏覽器和Node.js,這篇文章主要介紹了axios在Vue3中的使用,需要的朋友可以參考下
    2023-07-07
  • vue3.0+vue-router+element-plus初實踐

    vue3.0+vue-router+element-plus初實踐

    這篇文章主要介紹了vue3.0+vue-router+element-plus初實踐,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2020-12-12
  • 基于VUE實現(xiàn)判斷設備是PC還是移動端

    基于VUE實現(xiàn)判斷設備是PC還是移動端

    這篇文章主要介紹了基于VUE實現(xiàn)判斷設備是PC還是移動端,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
    2020-07-07
  • vue解決刷新頁面時會出現(xiàn)變量閃爍的問題

    vue解決刷新頁面時會出現(xiàn)變量閃爍的問題

    這篇文章主要介紹了vue解決刷新頁面時會出現(xiàn)變量閃爍的問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-01-01
  • vue3使用vue-router嵌套多級路由的方法

    vue3使用vue-router嵌套多級路由的方法

    Vue3 嵌套路由的使用和 Vue2 相差不大,主要的區(qū)別是 Vue3 的路由實例化使用了 createApp() 方法,所以實例化路由時需要傳入根組件,這篇文章主要介紹了vue3使用vue-router嵌套路由(多級路由),需要的朋友可以參考下
    2023-12-12
  • 如何使用Vuex+Vue.js構(gòu)建單頁應用

    如何使用Vuex+Vue.js構(gòu)建單頁應用

    這篇文章主要教大家如何使用Vuex+Vue.js構(gòu)建單頁應用,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-10-10
  • 一起來學習Vue的組件化

    一起來學習Vue的組件化

    這篇文章主要為大家詳細介紹了Vue的組件化,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助
    2022-03-03
  • 詳解vue使用Echarts畫柱狀圖

    詳解vue使用Echarts畫柱狀圖

    這篇文章主要為大家介紹了vue使用Echarts畫柱狀圖,具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助
    2022-01-01
  • vue components 動態(tài)組件詳解

    vue components 動態(tài)組件詳解

    這篇文章主要介紹了vue components 動態(tài)組件,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2021-11-11

最新評論