首页高德地图标注信息，标注信息居住怎么处理，给一个demo

高德地图标注信息，标注信息居住怎么处理，给一个demo

时间: 2024-05-13 13:18:56 浏览: 92

对于高德地图的标注信息，可以通过添加自定义信息窗体的方式来展示居住信息。以下是一个简单的demo供参考： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>高德地图标注信息居住信息展示</title> <script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script> <style type="text/css"> #infoWindow { width: 300px; height: 180px; padding: 10px; } #infoWindow h3 { margin: 0; font-size: 18px; } #infoWindow p { margin: 10px 0; font-size: 14px; } </style> </head> <body> <div id="container" style="width:100%;height:500px;"></div> <script> // 创建地图对象 var map = new AMap.Map("container", { center: [116.397428, 39.90923], zoom: 13 }); // 创建信息窗体 var infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(0, -30) }); // 添加标注 var marker = new AMap.Marker({ position: [116.397428, 39.90923], map: map }); marker.content = '<div id="infoWindow">' + '<h3>居住信息</h3>' + '<p>地址：北京市东城区王府井大街1号</p>' + '<p>房型：两室一厅</p>' + '<p>面积：80平方米</p>' + '</div>'; marker.on('click', function (e) { infoWindow.setContent(e.target.content); infoWindow.open(map, e.target.getPosition()); }); </script> </body> </html> ``` 在这个demo中，我们创建了一个地图对象，然后添加了一个标注点，并为其创建了一个自定义信息窗体。在标注点的点击事件中，我们将自定义信息窗体的内容设置为居住信息，并将其展示在地图上。你可以根据实际情况修改自定义信息窗体的内容和样式。

阅读全文