高德地图+geojson
时间: 2023-09-11 18:06:40 浏览: 60
高德地图支持解析和展示GeoJSON数据。你可以使用高德开放平台的JavaScript API来加载和显示GeoJSON数据。
下面是一个简单的示例代码,演示如何在高德地图上展示一个GeoJSON文件:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>高德地图展示GeoJSON数据</title>
<style type="text/css">
#mapContainer {
width: 100%;
height: 500px;
}
</style>
</head>
<body>
<div id="mapContainer"></div>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=your_amap_api_key"></script>
<script>
// 创建地图对象
var map = new AMap.Map('mapContainer', {
zoom: 11, // 初始缩放级别
center: [116.397428, 39.90923] // 初始中心点经纬度
});
// 加载GeoJSON数据
AMap.plugin('AMap.GeoJSON', function() {
var geojson = new AMap.GeoJSON();
geojson.load('/path/to/your/geojson/file.geojson'); // 替换为你的GeoJSON文件路径
// 将GeoJSON图层添加到地图
geojson.setMap(map);
});
</script>
</body>
</html>
```
请将上述代码中的 `your_amap_api_key` 替换为你在高德开放平台申请的API Key,`/path/to/your/geojson/file.geojson` 替换为你的GeoJSON文件的实际路径。
这样,你就可以在网页上展示高德地图,并加载并显示GeoJSON数据了。