Rumah > Artikel > hujung hadapan web > Cara menggunakan JS dan Amap untuk memaparkan sempadan daerah pentadbiran di lokasi
Cara menggunakan JS dan Amap untuk merealisasikan fungsi memaparkan sempadan daerah pentadbiran lokasi
Dengan perkembangan Internet, perkhidmatan peta secara beransur-ansur menjadi bahagian yang sangat diperlukan dalam kehidupan seharian rakyat. Dalam pembangunan web, kita selalunya perlu menggunakan API peta untuk memaparkan maklumat lokasi geografi. Artikel ini akan memperkenalkan cara menggunakan JS dan Amap untuk melaksanakan fungsi paparan sempadan daerah pentadbiran lokasi dan memberikan contoh kod khusus.
<script src="https://webapi.amap.com/maps?v=1.4.15&key=your-key"></script>
Ganti your-key
替换成你获取到的高德地图的Key。
div
标签,给它指定一个唯一的ID,并设置相应的样式。具体代码如下:<div id="mapContainer" style="width: 100%; height: 600px;"></div>
// 创建地图对象 var map = new AMap.Map('mapContainer', { zoom: 11, // 缩放级别 center: [116.397428, 39.90923] // 地图中心点坐标 });
在上面的代码中,我们设置了地图的缩放级别为11,并且将地图显示的中心点设为了[116.397428, 39.90923],即北京市的坐标。
AMap.DistrictLayer
类,可以用来添加行政区边界图层。具体代码如下:// 创建行政区图层 var districtLayer = new AMap.DistrictLayer(); // 设置图层样式 districtLayer.setStyles({ 'fill': 'rgba(255, 0, 0, 0.3)', // 填充颜色 'stroke': '#ff0000', // 边界线颜色 'strokeWeight': 1 // 边界线宽度 }); // 将图层添加到地图上 districtLayer.setMap(map); // 设置要显示的行政区域 districtLayer.setDistrictByCityCode('citycode');
在上面的代码中,我们首先创建了一个行政区图层对象。然后,设置了图层的样式,包括填充颜色和边界线颜色。接着,将图层添加到地图上。最后,调用setDistrictByCityCode
方法,传入相应的城市代码,来设置要显示的行政区域。你可以在高德地图开放平台上找到相应城市的城市代码。
地点行政区边界展示 <script src="https://webapi.amap.com/maps?v=1.4.15&key=your-key"></script> <script> // 创建地图对象 var map = new AMap.Map('mapContainer', { zoom: 11, // 缩放级别 center: [116.397428, 39.90923] // 地图中心点坐标 }); // 创建行政区图层 var districtLayer = new AMap.DistrictLayer(); // 设置图层样式 districtLayer.setStyles({ 'fill': 'rgba(255, 0, 0, 0.3)', // 填充颜色 'stroke': '#ff0000', // 边界线颜色 'strokeWeight': 1 // 边界线宽度 }); // 将图层添加到地图上 districtLayer.setMap(map); // 设置要显示的行政区域,这里以北京市为例 districtLayer.setDistrictByCityCode('110000'); </script>
上述示例代码中的your-key
和110000
Dalam HTML, kita perlu mencipta bekas untuk peta. Anda boleh menggunakan teg div
, memberikannya ID unik dan menetapkan gaya yang sepadan. Kod khusus adalah seperti berikut:
AMap.DistrictLayer
, yang boleh digunakan untuk menambah lapisan sempadan daerah pentadbiran. Kod khusus adalah seperti berikut: 🎜🎜rrreee🎜Dalam kod di atas, kami mula-mula mencipta objek lapisan daerah pentadbiran. Kemudian, tetapkan gaya lapisan, termasuk warna isian dan warna garis sempadan. Seterusnya, tambahkan lapisan pada peta. Akhir sekali, panggil kaedah setDistrictByCityCode
dan masukkan kod bandar yang sepadan untuk menetapkan wilayah pentadbiran untuk dipaparkan. Anda boleh mencari kod bandar bandar yang sepadan pada platform terbuka Amap. 🎜Atas ialah kandungan terperinci Cara menggunakan JS dan Amap untuk memaparkan sempadan daerah pentadbiran di lokasi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!