首页html，webgis基于高德地图数据的网页设计代码案例

html，webgis基于高德地图数据的网页设计代码案例

时间: 2024-03-14 09:48:21 浏览: 11

以下是一个简单的基于高德地图数据的网页设计代码案例： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>高德地图数据网页设计</title> <style> #map { width: 100%; height: 500px; margin-bottom: 20px; } </style> </head> <body> <div id="map"></div> <script src="https://webapi.amap.com/maps?v=1.4.15&key=你的高德地图API密钥"></script> <script> var map = new AMap.Map('map', { zoom: 14, center: [116.397428, 39.90923] }); AMap.plugin(['AMap.ToolBar', 'AMap.Scale'], function(){ map.addControl(new AMap.ToolBar()); map.addControl(new AMap.Scale()); }); var marker = new AMap.Marker({ position: [116.397428, 39.90923], title: '这里是北京市中心', map: map }); </script> </body> </html> ``` 这个代码案例展示了如何使用高德地图 JavaScript API 在网页中嵌入地图，并在地图上标记一个点。需要注意的是，要使用该代码，需要在高德地图开放平台上申请一个 API 密钥，并将其替换成代码中的 `你的高德地图API密钥`。