不使用AMap.DistrictSearch,通过poi数据绘制省市县区块

个人申请高德地图key时无法使用AMap.DistrictSearch,可以通过poi数据绘制省市县区块

1.进入POI数据网站找到需要的省市县,下载对应的GeoJson文件 ,此处为poi数据网站链接

2.​

处理geoJson数据,可以直接新建json文件,将下载的geojson内容复制进入也可以使用。也可以在项目内webpack配置文件中修改,同时确保安装了json-loader。我一般都用前者就足够了

npm install json-loader --save-dev

复制代码
module: {
  rules: [
    {
      test: /\.geojson$/,
      loader: 'json-loader'
    }
  ]
}

.3.将文件放入项目内,从组件中引入json文件

复制代码
import areaList from "../../map/beijing.json";

4.获取点位坐标

复制代码
//绘制地图区域
             mapArea(){
                let _this = this
                let polygon;
                var points=[];
                areaList.features.forEach(i=>{
                    points=[[]];
                    i.geometry.coordinates[0][0].forEach(item=>{
                            points[0].push(new AMap.LngLat(item[0],item[1]));
                            // points.push([item[0],item[1]]);
                    })
                })
                return points
            },

5.生成地图

复制代码
initMap(){
                let _this = this;
                let mask = this.mapArea()
                _this.map = new AMap.Map('mapBox', {
                        mask: mask,
                        center: [110.051784, 34.74073],
                        expandZoomRange: true,
                        disableSocket: true,
                        viewMode: '3D',
                        showLabel: true,
                        labelzIndex: 130,
                        zoom: 10.2,
                        layers: [
                            new AMap.TileLayer.RoadNet({
                            }),
                            new AMap.TileLayer.Satellite()
                        ]
                    });

                    var maskerIn = new AMap.Marker({
                        position: [116.501415, 39.926055],
                        map: _this.map
                    })
                    var maskerOut = new AMap.Marker({//区域外的不会显示
                        position: [117.001415, 39.926055],
                        map: _this.map
                    })
                    var height = -5000;
                    var color = '#0088ffcc';//rgba
                    // 添加描边
                        new AMap.Polyline({
                            path: mask[0],
                            strokeColor: '#99ffff',
                            strokeWeight: 6,
                            map: _this.map
                        })
            },
相关推荐
Bug修理工Bubble18 分钟前
Optional:为什么一个 String? 能让代码少掉很多崩溃?
前端
巴勒个啦36 分钟前
2026 年 CSS 选型真相:我用 Tailwind v4 + 原生新特性重构了一个组件库
前端·angular.js
LEE37 分钟前
别再堆 AGENTS.md 了:前端团队如何把 AI Coding 做成一套可执行的工程系统
前端·后端
三十而立洋44 分钟前
JavaScript 原型链:一张图讲透「对象继承」的底层真相
前端·javascript
工具派1 小时前
markdown在线编辑器怎么选?渲染管线的3个坑和md转PDF跑版记录
前端·后端
平头哥技术团队1 小时前
Day 13 | 调 line-height 和 margin:三处间距让名片页脱离模板感
开发语言·前端·javascript·学习·html5
一位正在转型AI全栈的前端工程师1 小时前
AI 全栈学习之旅 -Week 9:什么是AI Agent?从Function Calling到LangGraph
前端·python
计算机魔术师1 小时前
Claude Opus 5 干不过人类客服?23.9% 的通过率撕开 Agent 真相
前端
cjy0001111 小时前
2026年9月零基础能听懂国内 FDE 讲师的课吗?
大数据·前端·人工智能·fde
南雨北斗2 小时前
wangeditor5 在vue3项目中的正确配置
前端