高德地图渲染多个marker和信息窗体

最新推荐文章于 2024-07-27 14:36:20 发布

qq_27598395

最新推荐文章于 2024-07-27 14:36:20 发布

阅读量760

点赞数

文章标签： javascript html servlet

本文链接：https://blog.csdn.net/qq_27598395/article/details/130121369

版权

该代码段展示了从服务端加载河流数据并使用Ajax进行POST请求的实现。数据成功返回后，内容被用来创建自定义信息窗口，显示包括河流名称、位置、属性等详细信息。在地图上点击标记时，会弹出相应河流的信息窗体。

摘要由CSDN通过智能技术生成

function getContent(singleData){
 let html = `<div class="infoWindow-box">
 <img class="infoWindow-close" src="../../static/image/close_white.png" />
 ${isnull(singleData.rvName)}
 <div class="pic-box">
 <img src="${baseip.substring(0, baseip.length - 1) + singleData.img}"/>
 </div>
 ${isnull(singleData.nt)}
 <ul class="infoWindow-ul">
 <li>河源所在位置：${isnull(singleData.rvSourLoc)}</li>
 <li>跨界类型：${isnull(singleData.crOverTypeNM)}</li>
 <li>河流类型：${isnull(singleData.rvTypeNM)}</li>
 <li>岸别：${isnull(singleData.bankNM)}</li>
 <li>河流流域面积(km²)：${isnull(singleData.rvBasArea)}</li>
 <li>河床宽(m)：${isnull(singleData.mnstwi)}</li>
 <li>多年平均流量(m³/s)：${isnull(singleData.mnstsumf)}</li>
 <li>流域内人口(万人)：${isnull(singleData.drbspp)}</li>
 <li>洪水平均传播时间(h)：${isnull(singleData.avtm)}</li>
 <li>设计流量(m³/s)：${isnull(singleData.designQ)}</li>
 <li>损耗系数：${isnull(singleData.canallossper)}</li>
 <li>警戒水位(m)：${isnull(singleData.warnZ)}</li>
 <li>所在行政区：${isnull(singleData.adnm)}</li>
 <li>河口所在位置：${isnull(singleData.rvMouLoc)}</li>
 <li>流经地区：${isnull(singleData.flowArea)}</li>
 <li>河流级别：${isnull(singleData.rvGradNM)}</li>
 <li>河流长度(km)：${isnull(singleData.rvLen)}</li>
 <li>平均比降(%)：${isnull(singleData.averSlop)}</li>
 <li>集雨面积(km²)：${isnull(singleData.mnsts)}</li>
 <li>枯水流量(m³/s)：${isnull(singleData.mnstksf)}</li>
 <li>洪水最大安全泄量(m³/s)：${isnull(singleData.mxsfds)}</li>
 <li>河道底高程(m)：${isnull(singleData.canalbuthei)}</li>
 <li>安全流量(m³/s)：${isnull(singleData.safetyQ)}</li>
 <li>设防水位(m)：${isnull(singleData.fortifyZ)}</li>
 <li>保证水位(m)：${isnull(singleData.safetyZ)}</li>
 </ul>
 </div>`
 return html
}

//构建自定义窗体
function createInfoWindow(item) {
var content = getContent(item)

   var infoWindowData = new AMap.InfoWindow({
       isCustom: true, //使用自定义窗体
       content: content,
       offset: new AMap.Pixel(8 ,-45)
   });
   return infoWindowData
}

//打开窗体
function openInfoWindow(infoWindow, marker) {
infoWindow.open(map, marker.getPosition());
}

//点击标记获取所点击标记的信息以及窗体要展示的数据，创建信息窗体
function markerClick(marker,item) {
var infoWindow = createInfoWindow(item)
openInfoWindow(infoWindow, marker)
}

// 水域/流域/行政区域弹窗
function openWaterInfoBox(list,keyName,keyLog,keyLat) {
   markerDataArr = []
   var lttd = '',lgtd = '';
   list.forEach((singleData,i) => {
       if(keyName === 'channame'){
           if(singleData.points){
               let currPoints = singleData.points.split('|');
               if (currPoints) {
                   lttd = parseFloat(currPoints[0].split(',')[0]);
                   lgtd = parseFloat(currPoints[0].split(',')[1]);
               }
           }

       }else{
           lttd = singleData[keyLog];
           lgtd = singleData[keyLat];
       }
       var marker = new AMap.Marker({
           position:[lttd, lgtd],//位置
           icon : icon
       })
       marker.setMap(map);
       if(mState !== 5){
           // label默认蓝框白底左上角显示，样式className为：amap-marker-label
           marker.setLabel({
               content : singleData[keyName],
               offset: new AMap.Pixel(0, 5), //设置文本标注偏移量
               direction: 'bottom' //设置文本标注方位
           });
       }

       AMap.event.addListener(marker, 'click', function(e) {
           setTimeout(()=>{
               markerClick(marker,singleData)
           },50)
       });
       markerDataArr.push(marker);
       if(i == 0){
           var infoWindow = createInfoWindow(singleData)
           openInfoWindow(infoWindow, marker)
       }
   })
}