高德地图进行省市下钻（vue）
高德地图本身就提供了省市下钻的功能，但是官网提供的下钻功能带有一个省份树，一般我们开发的过程中，主要是要用到下钻的功能而已，所以在这我就用vue的方式，只提取出来了下钻的功能。官网地址：https://lbs.amap.com/api/amap-ui/demos/amap-ui-districtexplorer/index/?_=1580992896523步骤：一、引入高德地图找到publ...
·
高德地图本身就提供了省市下钻的功能，但是官网提供的下钻功能带有一个省份树，一般我们开发的过程中，主要是要用到下钻的功能而已，所以在这我就用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、点击返回全国时，地图返回全国
效果图：
前往低代码交流专区
更多推荐
3
0- 0
已为社区贡献4条内容
所有评论(0)