vue 高德图层---省市区行政图层显示
官网文档:https://lbs.amap.com/api/javascript-api-v2/guide/layers/districtlayer
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | var map; var distProvince; initMap() { //初始化地图 AMapLoader.load({ key: '申请的key' , version: '2.0' , //需要使用JSAPI 2.0版本。若从1.x版本升级,之前的图层和点标记等方法有改动,可参考官网升级指南:https://lbs.amap.com/api/javascript-api-v2/update Loca: { version: '2.0' , //需要使用2.0版本,与JSAPI 2.0版本对应 } }).then((AMap) => { map = new AMap.Map( 'container' , { zoom: 12, //级别,地图放大倍数 center: [120.41, 36.05], //中心点坐标 viewMode: '3D' , //使用3D视图 mapStyle: "amap://styles/darkblue" ,//样式 }); //创建省市简易行政区图层 distProvince = new AMap.DistrictLayer.Province({ zIndex: 10, //设置图层层级 zooms: [2, 15], //设置图层显示范围 adcode: "370200" , //设置行政区 adcode depth: 2, //设置数据显示层级,0:显示国家面,1:显示省级,当国家为中国时设置depth为2的可以显示市一级,2:区县 }); // 设置行政区图层样式 distProvince.setStyles({ "stroke-width" : 2, //描边线宽 fill: function (data) { //设置区域填充颜色,可根据回调信息返回区域信息设置不同填充色 //回调返回区域信息数据,字段包括 SOC(国家代码)、NAME_ENG(英文名称)、NAME_CHN(中文名称)等 //国家代码名称说明参考 https://a.amap.com/jsapi_demos/static/demo-center/js/soc-list.json return "rgba(14,91,141,0.55)" ; }, }); //将简易行政区图层添加到地图 map.add(distProvince); }). catch ((e) => { console.log(e); }); }, |
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!
2019-02-20 Oracle导出csv时数字不变成科学计数法