首页高德地图读取json

高德地图读取json

时间: 2023-10-18 10:29:50 浏览: 120

你可以使用高德地图的 JavaScript API 来读取和展示 GeoJSON 数据。以下是一个简单的示例代码： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>高德地图读取 GeoJSON 示例</title> <style type="text/css"> #mapContainer { width: 100%; height: 400px; } </style> </head> <body> <div id="mapContainer"></div> <script src="https://webapi.amap.com/maps?v=1.4.15&key=你的高德地图API密钥"></script> <script> var map = new AMap.Map('mapContainer'); // 读取 GeoJSON 数据 AMapUI.loadUI(['geo/DistrictExplorer'], function(DistrictExplorer) { var districtExplorer = new DistrictExplorer(); // 设置数据源 districtExplorer.loadAreaNode('全国', function(error, areaNode) { // 获取全国的 GeoJSON 数据 var geoJSON = areaNode.getSubFeatures(); // 展示 GeoJSON 数据 map.data.addGeoJson(geoJSON); }); }); </script> </body> </html> ``` 在示例中，需要将代码中的`你的高德地图API密钥`替换为你自己的高德地图 API 密钥。同时，确保在页面中引入了高德地图的 JavaScript API。这段代码会创建一个地图容器，并使用高德地图 JavaScript API 加载地图。然后，通过 `AMapUI.loadUI()` 方法加载 `DistrictExplorer` 组件，该组件可以用来读取 GeoJSON 数据。接着，使用 `loadAreaNode()` 方法加载全国的地区节点（即全国的 GeoJSON 数据），并使用 `getSubFeatures()` 方法获取 GeoJSON 数据。最后，调用 `map.data.addGeoJson()` 方法将 GeoJSON 数据添加到地图上进行展示。你可以根据自己的需求修改代码，例如设置地图的初始中心点、缩放级别等。详细的 API 文档可以在高德地图开发者文档中找到。

阅读全文