这里给使用高德地图下钻提供一个思路
先讲下我的思路,高德地图api有一个地图绘制区域,你只要提供区码,就可以绘制该区域。以浙江省为例,我一开给浙江省的区码就可以绘制出浙江省的区域,接下来我要进入杭州市,当我点击杭州市的时候我先清空地图上的覆盖层并且能获取到“杭州市”这个字符串,通过对比这个字符串我就可以给出杭州市的区码,最后绘制出杭州市的覆盖层。
接下来看代码:
第一步
绘制地图:
//创建地图
这一点。地图=new同理。地图(“容器”,{
光标:“默认”,
resizeEnable:没错,
expandZoomRange:没错,
gestureHandling:“贪婪”,//缩放(8、20):,
变焦:12,
defaultCursor:“指针”,
mapStyle:“同理://风格/f6e3818366ba5268d50ea3f2296eb3eb”,
showLabel:真
});
第二步(关键)
让=这个;
AMapUI。loadUI ([“geo/DistrictExplorer”], DistrictExplorer=比;{//创建一个实例
那districtExplorer=new districtExplorer ({
eventSupport:没错,
地图:this.map
});//设置绘制的子区域和父区域的自身属性(包括线颜色,透明度等)执行renderAreaNode()就可以开始绘制区域了
函数renderAreaNode (areaNode) {//绘制子级区划
that.districtExplorer。renderSubFeatures (areaNode函数(
特性,
我
){
返回{
光标:“默认”,
泡沫:没错,//strokeColor:“# 00 a4ce ",//线颜色
strokeColor:“# 03 d7a1”,
strokeOpacity: 1、//线透明度
strokeWeight: 1.5//线宽//fillColor:“# 09152“,//填充色
fillColor:“072942 #”,
fillOpacity: 0.1//填充透明度
};
});//绘制父区域
that.districtExplorer。renderParentFeature (areaNode, {
光标:“默认”,
泡沫:没错,//strokeColor:“# 00 a4ce ",//线颜色
strokeColor:“# 03 d7a1”,
strokeOpacity: 1、//线透明度
strokeWeight: 1.5//线宽//fillColor:“# 09152“,//填充色
fillColor:“072942 #”,
fillOpacity: 0.6//填充透明度
});
}//var adcodes=[];////根据角色来绘制不同的区域//dcodes=[//330200//浙江//];
that.map.clearMap ();//清空所有绘制物//绘制多区域
that.districtExplorer.loadMultiAreaNodes(这一点。adcodes,函数(
错误,
areaNodes
){//设置定位节点,支持鼠标位置识别//注意节点的顺序,前面的高优先级
that.districtExplorer.setAreaNodesForLocating (areaNodes);//清除已有的绘制内容
that.districtExplorer.clearFeaturePolygons ();
(var=0, len=areaNodes.length;我& lt;兰;我+ +){
renderAreaNode (areaNodes[我]);
}//更新地图视野
that.map.setFitView (that.districtExplorer.getAllFeaturePolygons ());
});//添加点标记
that.addMarker(数据);
});
。adcodes是区码,这里的关键在于清空,利用好<代码> that.map.clearMap ();> that.map.setFitView (that.districtExplorer.getAllFeaturePolygons());>
区码以浙江省为例
如果(data.result.rows [0]。cities_name==昂贾菔小?{
这一点。adcodes=[330100];
}else if (data.result.rows [0]。cities_name==澳ㄊ小?{
这一点。adcodes=[330200];
}else if (data.result.rows [0]。cities_name=="温州市”){
这一点。adcodes=[330300];
}else if (data.result.rows [0]。cities_name==凹涡耸小?{
这一点。adcodes=[330400];
}else if (data.result.rows [0]。cities_name==昂菔小?{
这一点。adcodes=[330500];
}else if (data.result.rows [0]。cities_name==吧苄耸小?{
这一点。adcodes=[330600];
}else if (data.result.rows [0]。cities_name==敖鸹小?{
这一点。adcodes=[330700];
}else if (data.result.rows [0]。cities_name==搬橹菔小?{
这一点。adcodes=[330800];
}else if (data.result.rows [0]。舟cities_name==吧绞小?{
这一点。adcodes=[330900];
}else if (data.result.rows [0]。cities_name==疤ㄖ菔小?{
这一点。adcodes=[331000];
}else if (data.result.rows [0]。cities_name==袄鏊小?{
这一点。adcodes=[331100];
}
以上所述是小编给大家介绍的vue使用高德地图点击下钻上浮效果的实现思路,希望对大家有所帮助,如果大家有任何疑问请给我留的言,小编会及时回复大家的。在此也非常感谢大家对网站的支持。
