vue使用高德地圖點擊下鉆上浮效果的實現(xiàn)思路

更新時間：2019年10月12日 08:32:56 作者：宋世澤

這篇文章主要介紹了vue使用高德地圖點擊下鉆上浮效果的實現(xiàn)思路,本文以浙江省為例通過實例代碼給大家介紹的非常詳細，需要的朋友可以參考下

這里給使用高德地圖下鉆提供一個思路

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

第一步

繪制地圖：

//創(chuàng)建地圖
  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 => {
   //創(chuàng)建一個實例
   that.districtExplorer = new DistrictExplorer({
   eventSupport: true,
   map: this.map
   });

   //設置繪制的子區(qū)域和父區(qū)域的自身屬性（包括線顏色，透明度等）執(zhí)行renderAreaNode（）就可以開始繪制區(qū)域了
   function renderAreaNode(areaNode) {
   //繪制子級區(qū)劃
   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 //填充透明度
    };
   });
   //繪制父區(qū)域
   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 = [];
   // //根據(jù)角色來繪制不同的區(qū)域
   // that.adcodes = [
   // 330200 //浙江
   // ];
   that.map.clearMap(); //清空所有繪制物
   //繪制多區(qū)域
   that.districtExplorer.loadMultiAreaNodes(this.adcodes, function(
   error,
   areaNodes
   ) {
   //設置定位節(jié)點，支持鼠標位置識別
   //注意節(jié)點的順序，前面的高優(yōu)先級
   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是區(qū)碼，這里的關鍵在于清空，利用好 that.map.clearMap(); //清空所有繪制物再重新進行繪制，再通過 that.map.setFitView(that.districtExplorer.getAllFeaturePolygons()); 就可以達到下鉆的效果，上浮也是同理。

區(qū)碼以浙江省為例

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使用高德地圖點擊下鉆上浮效果的實現(xiàn)思路,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！

您可能感興趣的文章: