高德地图进行省市下钻（vue）

高德地图本身就提供了省市下钻的功能，但是官网提供的下钻功能带有一个省份树，一般我们开发的过程中，主要是要用到下钻的功能而已，所以在这我就用vue的方式，只提取出来了下钻的功能。

官网地址：https://lbs.amap.com/api/amap-ui/demos/amap-ui-districtexplorer/index/?_=1580992896523

步骤：
一、引入高德地图
找到public/index.html，用cdn的方式引入：

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.14&key=您申请的key值"></script>
<script type="text/javascript" src="http://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>

二、引入AMapUI
在项目的根目录创建vue.config.js，填入以下内容：

module.exports = {publicPath: './',configureWebpack: {externals: {AMap: "AMap",AMapUI: "AMapUI"}}
}

重新开启项目即可使用，不然会报AMap和AMapUI没声明的错误

三、创建组件
创建了一个amap.vue文件，该文件作为组件component，可以运用到父组件中

<template><div id="container"></div>
</template>
<script>
import AMap from "AMap";
import AMapUI from "AMapUI";export default {props: {reContry: Boolean // 父组件带有一个返回全国的操作按钮控制},data() {return {amap: null,districtExplorer: null,tipMarker: null,$tipMarkerContent: null,currentAreaNode: null,aReContry: this.reContry};},mounted() {this.amap = new AMap.Map("container", {defaultCursor: "pointer",center: [103.714129, 38.150339], // 地图中心点zoom: 4, // 地图显示的缩放级别resizeEnable: true, //是否监控地图容器尺寸变化mapStyle: "amap://styles/darkblue" // 地图样式});this.drawArea();},methods: {drawArea() {AMapUI.load(["ui/geo/DistrictExplorer", "lib/$"],(DistrictExplorer, $) => {//创建一个实例this.districtExplorer = new DistrictExplorer({eventSupport: true, //打开事件支持map: this.amap});//当前聚焦的区域this.$tipMarkerContent = $('<div class="tipMarker top"></div>');this.tipMarker = new AMap.Marker({content: this.$tipMarkerContent.get(0),offset: new AMap.Pixel(0, 0),bubble: true});//监听feature的hover事件this.districtExplorer.on("featureMouseout featureMouseover",(e, feature) => {this.toggleHoverFeature(feature,e.type === "featureMouseover",e.originalEvent ? e.originalEvent.lnglat : null);});//监听鼠标在feature上滑动this.districtExplorer.on("featureMousemove", e => {//更新提示位置this.tipMarker.setPosition(e.originalEvent.lnglat);});//feature被点击this.districtExplorer.on("featureClick", (e, feature) => {const props = feature.properties;//  if (props.level === "province") {// 只下钻到省一级 （省：province，市：city，县：district）// 若是下钻到县一级，那么这个if判断就可以注释掉this.switch2AreaNode(props.adcode);this.aReContry = false;// }});//全国this.switch2AreaNode(100000);});},//根据Hover状态设置相关样式toggleHoverFeature(feature, isHover, position) {this.tipMarker.setMap(isHover ? this.amap : null);if (!feature) {return;}const props = feature.properties;if (isHover) {//更新提示内容this.$tipMarkerContent.html(props.name);//更新位置this.tipMarker.setPosition(position || props.center);}//更新相关多边形的样式const polys = this.districtExplorer.findFeaturePolygonsByAdcode(props.adcode);polys.forEach(elemnt => {elemnt.setOptions({fillOpacity: isHover ? 0.5 : 0});});},//绘制某个区域的边界renderAreaPolygons(areaNode) {//更新地图视野if (!this.aReContry) {this.amap.setBounds(areaNode.getBounds(), null, null, true);} else {this.amap.setZoom(4);this.amap.setCenter(new AMap.LngLat(103.714129, 38.150339));}//清除已有的绘制内容this.districtExplorer.clearFeaturePolygons();//绘制子区域this.districtExplorer.renderSubFeatures(areaNode, () => {return {cursor: "default",bubble: true,strokeColor: "#fff", //线颜色strokeOpacity: 0.4, //线透明度strokeWeight: 1, //线宽fillOpacity: 0 //填充透明度};});//绘制父区域this.districtExplorer.renderParentFeature(areaNode, {cursor: "default",bubble: true,strokeColor: "#fff", //线颜色strokeOpacity: 1, //线透明度strokeWeight: 1, //线宽fillOpacity: 0 //填充透明度});},//切换区域后刷新显示内容refreshAreaNode(areaNode) {this.districtExplorer.setHoverFeature(null);this.renderAreaPolygons(areaNode);},//切换区域switch2AreaNode(adcode, callback) {if (this.currentAreaNode &&"" + this.currentAreaNode.getAdcode() === "" + adcode) {return;}this.loadAreaNode(adcode, (error, areaNode) => {if (error) {if (callback) {callback(error);}return;}this.currentAreaNode = areaNode;//设置当前使用的定位用节点this.districtExplorer.setAreaNodesForLocating([this.currentAreaNode]);this.refreshAreaNode(areaNode);if (callback) {callback(null, areaNode);}});},//加载区域loadAreaNode(adcode, callback) {this.districtExplorer.loadAreaNode(adcode, (error, areaNode) => {if (error) {if (callback) {callback(error);}window.console.error(error);return;}if (callback) {callback(null, areaNode);}});}}
};
</script>
<style lang="less">
#container {width: 100%;height: 100%;
}
.amap-marker-content {.tipMarker {color: #555;background-color: rgba(255, 254, 239, 0.8);border: 1px solid #7e7e7e;padding: 2px 6px;font-size: 12px;white-space: nowrap;display: inline-block;&:before,&:after {content: "";display: block;position: absolute;margin: auto;width: 0;height: 0;border: solid transparent;border-width: 5px 5px;}&.top {transform: translate(-50%, -110%);&:before,&:after {bottom: -9px;left: 0;right: 0;border-top-color: rgba(255, 254, 239, 0.8);}&:before {bottom: -10px;border-top-color: #7e7e7e;}}}
}
.amap-logo,
.amap-copyright {display: block !important;visibility: inherit !important;
}
</style>

四、运用到父组件中

<template><div class="home"><button @click="returnCountry">返回全国</button><div class="mapp"><aMap :reContry="reContry"></aMap></div></div>
</template>
<script>import aMap from "@/components/amap";export default {name: "home",components: { aMap }, // 引入注册data() {return {reContry: true}},methods: {//点击全国按钮returnCountry() {this.reContry = true;setTimeout(() => {this.reContry = false;}, 500);},}}
</script>
<style scoped lang="less">//地图.mapp {width: 48vw;height: 69vh;z-index: 2;}
</style>

运行描述：
1、刚进入时为全国的地图，鼠标划入时，有tooltip显示某个省份的名称，并且会有填充色，移除即消失
2、点击某个省份时，会下钻到下级行政区域，并且有画线
3、点击返回全国时，地图返回全国

效果图：

高德地图进行省市下钻（vue）相关推荐

高德地图实现区域下钻
高德地图实现区域下钻代码开源地址:GitHub 代码开源地址:Gitee 展示图 demo地址戳我哦转载于:https://my.oschina.net/antsdot/blog/2995997
高德地图绘制省市边界，根据指标各市显示不同状态
高德api中提供了绘制边界方法,引用简单,只需传入省市名称即可,以下以江苏省示例,为演示效果数据为自定义,效果如下. ① index.html文件中引入高德地图及关键方法 <script typ ...
高德地图 JS API 结合VUE 展示公交线路示例
绘制一条线路效果图: 1. 安装: npm i @amap/amap-jsapi-loader --save 2. 代码: <template><div class="am ...
基于高德地图为底图实现全国、省、地级市下钻
目录简介效果图具体实现注意点不足点简介由于前面通过echarts和百度地图都没能实现理想效果从而只能另寻方案,最终实现方案:全国省采用echarts渲染,单个省.地级市采用高德地图为地图 ...
vue传中文标点_vue项目引入第三方高德地图实现标点定位
vue项目中,高德地图使用. 引入vue中.异步导入vue中. gaoDe(key) { window.onApiLoaded = function () { var map = new AMap.M ...
Vue 中使用高德地图api
比较简单的原生方式 <template><div style="margin: 0px;padding: 0px"><div id="pan ...
vue框架中使用高德地图自定义icon问题
** vue框架中使用高德地图自定义icon问题 ** vue框架中使用高德地图自定义icon,在编译时,因为图片会有封装问题等,但是在高德地图中没有转化对应的路径,在最后结果中会出现找不到图标的问题 ...
高德地图货车路径规划JS API以及WEB API在VUE中使用方法
做一个路径规划系统,使用到了高德地图的API以及VUE,而路径规划方面在高德地图中,货车的接口使用次数是极为有限的,研究了一段时间,所以使用的时候要谨慎一点次数. 本文记录一下高德地图的JS API和 ...
vue使用高德地图原生API实现省份添加背景色，文字标注；实现点聚合和点标记点击之后出现信息窗体的功能
功能描述:初始状态下,可以看到所有数据在地图上的分布的省份及相应的分布数量,点击点标注可以弹出对应的详细信息. 该例子使用了高德地图原生API去实现上述功能,效果图如下: 下面附上实现步骤: 1. v ...

高德地图进行省市下钻（vue）

高德地图进行省市下钻（vue）相关推荐

最新文章

热门文章