Vue接入高德地圖的完整實(shí)例

更新時(shí)間：2022年06月14日 16:38:45 作者：王+V

近期在用vue做一個(gè)環(huán)保類的項(xiàng)目,要求使用高德地圖,下面這篇文章主要給大家介紹了關(guān)于Vue接入高德地圖的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

Vue 使用高德地圖，實(shí)現(xiàn)縮放，鼠標(biāo)繪制，測距、測面積、行政區(qū)域范圍繪制、關(guān)鍵詞查詢等操作。

參考資料

高德地圖API官網(wǎng)：https://lbs.amap.com/

高德地圖2.0參考手冊：https://lbs.amap.com/api/jsapi-v2/documentation#pixel

高德地圖2.0示例代碼：https://lbs.amap.com/demo/list/jsapi-v2

Vue接入高德地圖

引用

首相要在index.html文件中引入高德地圖。

<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=您申請的key值&plugin=AMap.ToolBar"></script>

使用

在需要寫地圖的頁面中添加一個(gè)div用來展示地圖，記得為這個(gè)div設(shè)置高度和寬度，不然顯示不出來。

<div id="mapDiv"></div>

然后寫 TS 代碼把地圖顯示出來。

	  // 加載地圖
      initMap() {
        map = new AMap.Map('mapDiv', {
          zoom: 11,//級別
          center: [116.34703902, 40.48188],//中心點(diǎn)坐標(biāo)
          viewMode: '3D'//使用3D視圖
        });
      },

然后地圖就出現(xiàn)了。

實(shí)現(xiàn)點(diǎn)擊按鈕縮放功能

首先寫兩個(gè)靜態(tài)按鈕，縮放也很簡單，就兩行代碼就可以了。

地圖放大

map.zoomIn()

地圖縮小

map.zoomOut()

測量距離

測量距離稍微麻煩點(diǎn)，但是也還好其實(shí)。

首先我們要在初始化地圖完成之后，創(chuàng)建一個(gè)鼠標(biāo)繪制工具。

    // 測距、測面積使用
    mouseTool = new AMap.MouseTool(map);

MouseTool 這個(gè)插件需要在index.html文件的script中引入一下，就是plugin參數(shù)后邊加就可以，用英文的逗號隔開。

<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=您申請的key值&plugin=AMap.ToolBar,AMap.MouseTool"></script>

然后寫一個(gè)按鈕“測距”，點(diǎn)擊的時(shí)候就執(zhí)行測距方法。

   // 開始測距
   start() {
       mouseTool.rule({
            startMarkerOptions: {//可缺省
              icon: new AMap.Icon({
                size: new AMap.Size(19, 31),//圖標(biāo)大小
                imageSize: new AMap.Size(19, 31),
                image: "http://webapi.amap.com/theme/v1.3/markers/b/start.png"
              }),
              offset: new AMap.Pixel(-9, -31)
            },
            endMarkerOptions: {//可缺省
              icon: new AMap.Icon({
                size: new AMap.Size(19, 31),//圖標(biāo)大小
                imageSize: new AMap.Size(19, 31),
                image: "http://webapi.amap.com/theme/v1.3/markers/b/end.png"
              }),
              offset: new AMap.Pixel(-9, -31)
            },
            midMarkerOptions: {//可缺省
              icon: new AMap.Icon({
                size: new AMap.Size(19, 31),//圖標(biāo)大小
                imageSize: new AMap.Size(19, 31),
                image: "http://webapi.amap.com/theme/v1.3/markers/b/mid.png"
              }),
              offset: new AMap.Pixel(-9, -31)
            },
            lineOptions: {//可缺省
              strokeStyle: "solid",
              strokeColor: "#FF33FF",
              strokeOpacity: 1,
              strokeWeight: 2
            }
            //同 RangingTool 的 自定義 設(shè)置，缺省為默認(rèn)樣式
          });
    }

    //  停止測距
    stop() {
		mouseTool.close(true)//關(guān)閉，并清除覆蓋物
	}

測量面積

測量面積和測距類似。

	// 開始測面積
	start() {
		mouseTool.measureArea({
          strokeColor: '#80d8ff',
          fillColor: '#80d8ff',
          fillOpacity: 0.3
       });
	}

	// 停止測面積
	stop() {
		mouseTool.close(true)//關(guān)閉，并清除覆蓋物
	}

很簡單吧！

行政區(qū)劃查詢渲染

這個(gè)也很簡單哈寶寶們！

首先也是走接口去獲取行政區(qū)劃的范圍啊。

需要用到這個(gè)插件AMap.DistrictSearch，和測距一樣在index.html中引入一下。

然后在初始化地圖完成的時(shí)候?qū)嵗幌隆?/p>

   // 搜索行政區(qū)
   district = new AMap.DistrictSearch(opts);

首先寫一個(gè)輸入框，用來輸入查詢的行政區(qū)劃的名稱，比如輸入“北京”，然后點(diǎn)擊按鈕走下面的方法來查詢北京行政區(qū)劃的范圍信息。

	  // 行政區(qū)劃搜索
      seachArea() {
        if (this.areaInput === "") {
          map.remove(areaPolygons)//清除上次結(jié)果
          return;
        }
        district.search(this.areaInput, (status, result) => {
          map.remove(areaPolygons)//清除上次結(jié)果
          areaPolygons = [];
          var bounds = result.districtList[0].boundaries;
          if (bounds) {
            for (var i = 0, l = bounds.length; i < l; i++) {
              //生成行政區(qū)劃polygon
              var polygon = new AMap.Polygon({
                strokeWeight: 3,
                path: bounds[i],
                fillOpacity: 0,
                fillColor: '#80d8ff',
                strokeColor: 'red'
              });
              areaPolygons.push(polygon);
            }
          }
          map.add(areaPolygons)
          map.setFitView(areaPolygons);//視口自適應(yīng)
        });
      },

關(guān)鍵字搜索

這個(gè)其實(shí)和行政區(qū)劃查詢差不多。

首先呢，需要在地圖初始化完成之后呢，創(chuàng)建一個(gè)關(guān)鍵字查詢的實(shí)例。

		// 關(guān)鍵字搜索
        AMap.plugin(["AMap.PlaceSearch"], () => {
          //構(gòu)造地點(diǎn)查詢類
          placeSearch = new AMap.PlaceSearch({
            pageSize: 50, // 單頁顯示結(jié)果條數(shù)
            pageIndex: 1, // 頁碼
            autoFitView: false // 是否自動(dòng)調(diào)整地圖視野使繪制的 Marker點(diǎn)都處于視口的可見范圍
          });
        });

這個(gè)還有其他的參數(shù)，可根據(jù)官方文檔自己判斷挑選使用呀！

有一個(gè)輸入框，輸入要查詢的關(guān)鍵字，然后一個(gè)按鈕來走接口查詢相關(guān)的關(guān)鍵字。然后會返回給你一個(gè)列表包含著關(guān)鍵字搜索回來的數(shù)據(jù)。

	searchKeyWord() {
	   placeSearch.search("北京", (state, data) => {
          this.total = 0
          let dataList = data
          switch (dataList.info) {
            case 'OK':
              console.log("-------->", dataList.poiList.pois)
              break;
            case 'TIP_CITIES':
              console.log("-------->", dataList.cityList)
              break;
          }
        });
	}

上邊如果 info 為 OK，標(biāo)識返回的是地點(diǎn)列表，如果是 TIP_CITIES，標(biāo)識返回的是在下面這些城市里面有關(guān)于搜索關(guān)鍵字的相關(guān)數(shù)據(jù)。

比如搜索北京，返回地點(diǎn)列表。

比如搜索“動(dòng)物園”，返回相關(guān)城市列表。

鼠標(biāo)繪制區(qū)域

這個(gè)簡單，就是點(diǎn)擊一個(gè)按鈕開始繪制多邊形。

	  // 繪制區(qū)域
      startPolygon() {
        polyTool = new AMap.MouseTool(map);
        polyTool.polygon({
          strokeColor: "#1791fc",
          strokeOpacity: 1,
          strokeWeight: 1,
          fillColor: '#1791fc',
          fillOpacity: 0.4,
          strokeStyle: "solid",
          extData: {
            id: '123'
          }
        })
        polyTool.on('draw', (event) => {
          let poly = event.obj   // 繪制完多邊形實(shí)力對象
          console.log('繪制圖形頂點(diǎn)信息列表--------> ', poly.getOptions())
          console.log('繪制圖形的自定義屬性--------> ', poly.getOptions().path)
          polyTool.close()
          polyTool = null
        })
      },