vue中高德地圖的簡單使用

1、通過官方網站獲取對應的key值；

2、在html中引入相應script文件

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=f7f1406a1ee197180c9b7b2444d62b83&plugin=AMap.Autocomplete,AMap.PlaceSearch,AMap.Geocoder"></script>

3、安裝依賴包

npm install vue-amap --save

4、vue文件內使用

<template>
  <div style="width:100%">
    <div id="MAps"></div>
    <input id="tipinput" type="text" />
    <div id="show"></div>
    <div id="panel"></div>
  </div>
</template>

<script>
export default {
  name: "Maps",
  data() {
    return {};
  },
  mounted() {
    this.initMaps();
  },
  methods: {
    initMaps() {
      // 配置地圖的基本顯示
      let that = this;
      that.MAps = new AMap.Map("MAps", {
        resizeEnable: true, //是否監控地圖容器尺寸變化
        zoom: 11, //初始化地圖層級
        center: [116.397428, 39.90923], //初始化地圖中心點
        viewMode: "3D" //使用3D視圖
      });
      var Autocomplete = new AMap.Autocomplete({
        // type: "050000",
        input: "tipinput", //綁定哪個input值作為搜索條件--id為tipinput的input
        city: "010", //限定城市--北京
        // datatype: "busline", //提示信息類型--公交線路
        citylimit: true, //提示信息是否限定在該城市內--限定
        output: "show", //提示信息在哪里展示--展示在id為show的元素內
        outPutDirAuto: false //表示提示信息在下方被遮擋時是否自動放到input上方
      });

      var placeSearch = new AMap.PlaceSearch({
        map: that.MAps,
        pageSize: 5, // 單頁顯示結果條數
        pageIndex: 1, // 頁碼
        city: "0451", // 興趣點城市
        citylimit: true, //是否強制限制在設置的城市內搜索
        panel: "panel", // 結果列表將在此容器中進行展示。
        autoFitView: true // 是否自動調整地圖視野使繪制的 Marker點都處於視口的可見范圍
      });

      // 點擊選中搜索出來的信息時觸發
      AMap.event.addListener(Autocomplete, "select", e => {
        console.log(e);
        // 通過placeSearch的方法配置相應信息
        placeSearch.setCity(e.poi.adcode); //設置在哪個城市查詢--如不設置會在興趣點城市查詢
        placeSearch.search(e.poi.name); //根據查詢結果及城市顯示對應藍色標記
      });
      // 2為篩選內容，回調函數參數中result為2對應的查詢結果
      Autocomplete.search("2", (status, result) => {
        console.log(status, result);
      });

      // 點擊藍色標記后觸發事件
      AMap.event.addListener(placeSearch, "markerClick", function(e) {
        console.log(e);
        // 在這里可以拿到選取地點的對應經緯度
        let lng = e.event.lnglat.lng;
        let lat = e.event.lnglat.lat;
      });
    }
  }
};
</script>

<style lang="scss">
#MAps {
  width: 100%;
  height: 90%;
}
#show {
  height: 100px;
  width: 100px;
  background: chocolate;
}
#panel {
  position: absolute;
  background-color: white;
  max-height: 90%;
  overflow-y: auto;
  top: 10px;
  right: 10px;
  width: 280px;
}
</style>

附代碼截圖：