html,webgis基于高德地图数据的网页设计代码案例
时间: 2023-03-19 11:23:13 浏览: 128
以下是一个基于高德地图数据的网页设计代码案例,使用HTML和JavaScript编写。这个例子展示了如何在网页中嵌入高德地图,并使用JavaScript调用地图API,从而在地图上添加标记和信息窗口。
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>WebGIS基于高德地图数据的网页设计</title>
<style>
#mapContainer {
height: 500px;
width: 100%;
}
</style>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=YOUR_KEY_HERE"></script>
<script>
// 创建地图
var map = new AMap.Map('mapContainer', {
center: [116.397428, 39.90923],
zoom: 13
});
// 添加标记
var marker = new AMap.Marker({
position: [116.397428, 39.90923],
title: '北京市'
});
map.add(marker);
// 添加信息窗口
var infoWindow = new AMap.InfoWindow({
content: '<h3>北京市</h3><p>这是中国的首都。</p>'
});
marker.on('click', function() {
infoWindow.open(map, marker.getPosition());
});
</script>
</head>
<body>
<div id="mapContainer"></div>
</body>
</html>
```
请注意,代码中的`YOUR_KEY_HERE`需要替换为您自己的高德地图API密钥。此外,还需要在使用地图API之前加载高德地图JavaScript库。