Vue中使用高德地圖，實現周邊搜索

網上看了很多Vue中高德地圖的Demo,感覺零零碎碎的，有些說到一半就不知道怎么回事了。在此記錄下（這是我遇到的情況，如有其他坑，請自行踩坑）

忘了說了  這是基於element ui 的菜單欄做的 ，如不需要，自行剔除相關代碼樣式，重新寫個滑塊導航

一、安裝npm

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

二、引入

Script 引入

 

import AMapLoader from "@amap/amap-jsapi-loader";

let AMap = null;

 

三、代碼階段

 

這個代碼基本完成了周邊的類型搜索、標注；只是對搜索類型的還沒做，這個代碼邏輯看懂了，類型搜索很簡單了，我也是看了很多例子，零零碎碎的總結出來的代碼

 

Html Demo:

    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
    >
      <el-menu-item index="1">交通</el-menu-item>
      <el-menu-item index="2">娛樂</el-menu-item>
      <el-menu-item index="3">商場</el-menu-item>
      <el-menu-item index="4">學校</el-menu-item>
      <el-menu-item index="5">醫療</el-menu-item>
    </el-menu>
    <div class="album" id="album"></div>
  </div>

JS Demo:

export default {
  created() {
    this.initAMap();
  },
  data() {
    return {
      activeIndex: "1",
    };
  },
  mounted() {},
  methods: {
    // 周邊搜索
    searchNear(mapNew) {
      mapNew.clearMap();
      let placeSearch = new AMap.PlaceSearch({
        // city: '', // 興趣點城市
        citylimit: true, // 是否強制在設置的城市內搜索，默認false
        type: "地鐵", // 興趣點類別，用‘|’分隔，默認：'餐飲服務|商務住宅|生活服務'
        pageSize: 20, // 每頁條數，默認10，范圍1-50
        pageIndex: 1, // 頁碼
        extensions: "all", // 默認base，返回基本地址信息；all：返回詳細信息
        // map: AMap, // 地圖實例，可選
        // panel: 'panel', // 結果列表的id容器，可選
        autoFitView: true, // 是否自動調整地圖視野到marker點都處於可見范圍
      });

      let keywords = "", // 關鍵字
        position = [104.070081, 30.581108], // 中心點經緯度
        radius = 2000; // 搜索半徑 0-50000
      placeSearch.searchNearBy(
        keywords,
        position,
        radius,
        function (status, result) {
          console.log(mapNew, "地圖實列");
          // var icon = new AMap.Icon({
          //   size: new AMap.Size(10, 10), // 圖標尺寸
          //   image: iconquyu, // Icon的圖像
          //   imageOffset: new AMap.Pixel(0, -60), // 圖像相對展示區域的偏移量，適於雪碧圖等
          //   imageSize: new AMap.Size(40, 50), // 根據所設置的大小拉伸或壓縮圖片
          // });
          // console.log(icon,"圖片");
          new AMap.Marker({
              position: [
                104.070081,
                30.581108,
              ], //不同標記點的經緯度s
              // icon: "http://store.is.autonavi.com/showpic/2f754f895d410592bdf46eeddc379bee",//中心點icon
              title: 'aaa',
              clickable:true,
              // content:result.poiList.pois[i].name,
              // text:result.poiList.pois[i].name,
              // offset:[0,50],
              map: mapNew,
            });
          for (let i = 0; i < result.poiList.pois.length; i++) {
            new AMap.Marker({
              position: [
                result.poiList.pois[i].location.lng,
                result.poiList.pois[i].location.lat,
              ], //不同標記點的經緯度 
              // icon: "http://store.is.autonavi.com/showpic/2f754f895d410592bdf46eeddc379bee",
              title: result.poiList.pois[i].name,
              clickable:true,
              // content:result.poiList.pois[i].name,
              // text:result.poiList.pois[i].name,
              // offset:[0,50],
              map: mapNew,
            });
          }
          console.log(status, result, "結果"); //這個結果可以看出周邊的很多信息列表，根據結果做很多事，如果要翻頁，請移步官網 在此如有需要  附鏈接https://lbs.amap.com/api/webservice/guide/api/newpoisearch
        }
      );
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    initAMap() {
      let that = this;
      AMapLoader.load({
        key: "0a3647329c1fceff9e14bcd1a27f4f0d",
        version: "2.0",
        plugins: ["AMap.PlaceSearch", "AMap.Geolocation"],
      })
        .then((map) => {
          AMap = map;
          // 其他功能同h5
          var mapNew = new AMap.Map("album", {
            center: [104.070081, 30.581108], // 地圖中心點坐標
            zoom: 15, // 地圖縮放級別
          });
          that.searchNear(mapNew);
        })
        .catch((e) => {
          console.log("高德地圖加載錯誤", e);
        });
    },
  },
};

Css Demo:

.album {
  width: 824px;
  height: 532px;
  border-radius: 4px;
  position: relative;
}
.el-menu.el-menu--horizontal {
  border-bottom: none;
}
.el-menu--horizontal > .el-menu-item.is-active {
  border-bottom: none;
  color: #409eff !important;
}
.el-menu--horizontal > .el-menu-item {
  border-bottom: none;
}

代碼看完，如對標記不懂的，移步：https://lbs.amap.com/api/javascript-api/reference/overlay#marker

對路線規划不懂的，移步：https://lbs.amap.com/api/javascript-api/guide/services/navigation

最后是我對每個功能代碼期望的 效果圖，順便吐槽下：對那些沒得效果圖的，發出來干嘛啊  哈哈哈哈

   key  自行去搜索高德地圖Api, 到官網的控制台注冊申請，創建個測試項目就有了

   對了   如果對其中參數還不明白的  ，多看官網說明，理解就很簡單了（再附一句，代碼里面有很多測試代碼已注釋，基本沒啥用，忘刪了）