這裡給使用高德地圖下鑽提供一個思路

先講下我的思路，高德地圖api有一個地圖繪製區域，你只要提供區碼，就可以繪製該區域。以浙江省為例，我一開給浙江省的區碼就可以繪製出浙江省的區域，接下來我要進入杭州市，當我點選杭州市的時候我先清空地圖上的覆蓋層並且能獲取到‘杭州市'這個字串，通過對比這個字串我就可以給出杭州市的區碼，最後繪製出杭州市的覆蓋層。
接下來看程式碼：

第一步

繪製地圖：

//建立地圖
  this.map = new AMap.Map("container", {
   cursor: "default",
   resizeEnable: true,
   expandZoomRange: true,
   gestureHandling: "greedy",
   // zooms: [8, 20],
   zoom: 12,
   defaultCursor: "pointer",
   mapStyle: "amap://styles/f6e3818366ba5268d50ea3f2296eb3eb",
   showLabel: true
  });

第二步（關鍵）

let that = this;
  AMapUI.loadUI(["geo/DistrictExplorer"], DistrictExplorer => {
   //建立一個例項
   that.districtExplorer = new DistrictExplorer({
   eventSupport: true,
   map: this.map
   });

   //設定繪製的子區域和父區域的自身屬性（包括線顏色，透明度等）執行renderAreaNode（）就可以開始繪製區域了
   function renderAreaNode(areaNode) {
   //繪製子級區劃
   that.districtExplorer.renderSubFeatures(areaNode, function(
    feature,
    i
   ) {
    return {
    cursor: "default",
    bubble: true,
    // strokeColor: "#00a4ce", //線顏色
    strokeColor: "#03d7a1",
    strokeOpacity: 1, //線透明度
    strokeWeight: 1.5, //線寬
    // fillColor: "#09152a", //填充色
    fillColor: "#072942",
    fillOpacity: 0.1 //填充透明度
    };
   });
   //繪製父區域
   that.districtExplorer.renderParentFeature(areaNode, {
    cursor: "default",
    bubble: true,
    // strokeColor: "#00a4ce", //線顏色
    strokeColor: "#03d7a1",
    strokeOpacity: 1, //線透明度
    strokeWeight: 1.5, //線寬
    // fillColor: "#09152a", //填充色
    fillColor: "#072942",
    fillOpacity: 0.6 //填充透明度
   });
   }

   // var adcodes = [];
   // //根據角色來繪製不同的區域
   // that.adcodes = [
   // 330200 //浙江
   // ];
   that.map.clearMap(); //清空所有繪製物
   //繪製多區域
   that.districtExplorer.loadMultiAreaNodes(this.adcodes, function(
   error,
   areaNodes
   ) {
   //設定定位節點，支援滑鼠位置識別
   //注意節點的順序，前面的高優先順序
   that.districtExplorer.setAreaNodesForLocating(areaNodes);
   //清除已有的繪製內容
   that.districtExplorer.clearFeaturePolygons();
   for (var i = 0, len = areaNodes.length; i < len; i++) {
    renderAreaNode(areaNodes[i]);
   }
   //更新地圖視野
   that.map.setFitView(that.districtExplorer.getAllFeaturePolygons());
   });
   //新增點標記
   that.addMarker(data);
  });

this.adcodes是區碼，這裡的關鍵在於清空，利用好 that.map.clearMap(); //清空所有繪製物 再重新進行繪製，再通過 that.map.setFitView(that.districtExplorer.getAllFeaturePolygons()); 就可以達到下鑽的效果，上浮也是同理。

區碼以浙江省為例

if (data.result.rows[0].cities_name == "杭州市") {
   this.adcodes = [330100];
   } else if (data.result.rows[0].cities_name == "寧波市") {
   this.adcodes = [330200];
   } else if (data.result.rows[0].cities_name == "溫州市") {
   this.adcodes = [330300];
   } else if (data.result.rows[0].cities_name == "嘉興市") {
   this.adcodes = [330400];
   } else if (data.result.rows[0].cities_name == "湖州市") {
   this.adcodes = [330500];
   } else if (data.result.rows[0].cities_name == "紹興市") {
   this.adcodes = [330600];
   } else if (data.result.rows[0].cities_name == "金華市") {
   this.adcodes = [330700];
   } else if (data.result.rows[0].cities_name == "衢州市") {
   this.adcodes = [330800];
   } else if (data.result.rows[0].cities_name == "舟山市") {
   this.adcodes = [330900];
   } else if (data.result.rows[0].cities_name == "台州市") {
   this.adcodes = [331000];
   } else if (data.result.rows[0].cities_name == "麗水市") {
   this.adcodes = [331100];
   }

總結

以上所述是小編給大家介紹的vue使用高德地圖點選下鑽上浮效果的實現思路,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回覆大家的。在此也非常感謝大家對碼農教程網站的支援！
如果你覺得本文對你有幫助，歡迎轉載，煩請註明出處，謝謝！