快捷導(dǎo)航

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

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

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

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

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

第一步

繪制地圖：

//創(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
  });

第二步（關(guān)鍵）

let that = this;
  AMapUI.loadUI(["geo/DistrictExplorer"], DistrictExplorer => {
   //創(chuàng)建一個(gè)實(shí)例
   that.districtExplorer = new DistrictExplorer({
   eventSupport: true,
   map: this.map
   });

   //設(shè)置繪制的子區(qū)域和父區(qū)域的自身屬性（包括線顏色，透明度等）執(zhí)行renderAreaNode（）就可以開(kāi)始繪制區(qū)域了
   function renderAreaNode(areaNode) {
   //繪制子級(jí)區(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ù)角色來(lái)繪制不同的區(qū)域
   // that.adcodes = [
   // 330200 //浙江
   // ];
   that.map.clearMap(); //清空所有繪制物
   //繪制多區(qū)域
   that.districtExplorer.loadMultiAreaNodes(this.adcodes, function(
   error,
   areaNodes
   ) {
   //設(shè)置定位節(jié)點(diǎn)，支持鼠標(biāo)位置識(shí)別
   //注意節(jié)點(diǎn)的順序，前面的高優(yōu)先級(jí)
   that.districtExplorer.setAreaNodesForLocating(areaNodes);
   //清除已有的繪制內(nèi)容
   that.districtExplorer.clearFeaturePolygons();
   for (var i = 0, len = areaNodes.length; i < len; i++) {
    renderAreaNode(areaNodes[i]);
   }
   //更新地圖視野
   that.map.setFitView(that.districtExplorer.getAllFeaturePolygons());
   });
   //添加點(diǎn)標(biāo)記
   that.addMarker(data);
  });

this.adcodes是區(qū)碼，這里的關(guān)鍵在于清空，利用好 that.map.clearMap(); //清空所有繪制物再重新進(jìn)行繪制，再通過(guò) that.map.setFitView(that.districtExplorer.getAllFeaturePolygons()); 就可以達(dá)到下鉆的效果，上浮也是同理。

區(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 == "臺(tái)州市") {
   this.adcodes = [331000];
   } else if (data.result.rows[0].cities_name == "麗水市") {
   this.adcodes = [331100];
   }

總結(jié)

以上所述是小編給大家介紹的vue使用高德地圖點(diǎn)擊下鉆上浮效果的實(shí)現(xiàn)思路,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

您可能感興趣的文章: