点标记示例1：动态获取数据，点击标记点--弹出自定义信息窗口，弹出框交互操作
1.构建自定义信息表单//构建自定义信息表单functioncreateInfoWindow(item){//外层容器varinfo=document.createElement("div");info.className="info_wrapper";//标题部分varheadWrapper=document.createElement("div");headWrapper.className='head_infow'letheaderContent=``headWrapper.innerHTML=headerContent;//内容主体varcontentWrapper=document.createElement("div");contentWrapper.className='centerInfo';contentWrapper.innerHTML=`${item.label}
`;//操作按钮lettopartybtn=document.createElement("div");topartybtn.className='topartybtn'topartybtn.setAttribute('id',item.id)topartybtn.innerHTML='enter';topartybtn.ontouchstart=tomain;contentWrapper.appendChild(topartybtn);//tailletfooterWrapper=document.createElement("div");富terWrapper.innerHTML=`
`;info.appendChild(headWrapper);info.appendChild(contentWrapper);info.appendChild(footerWrapper);returninfo;}//信息窗口中的交互操作functiontomain(){//...}//关闭信息窗体functioncloseInfoWindow(){_this.map.clearInfoWindow();}2.创建infoWindowvar实例infoWindow=newAMap.InfoWindow({isCustom:true,//使用自定义表单//输入dom对象，或者htmlString//content:infoWindowContent,offset:newAMap.Pixel(0,-40),autoMove:true});3、得到数据列表dataList后，遍历并添加标记点if(dataList.length){dataList.forEach((item)=>{varmarker=newAMap.Marker({icon:"http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",位置:newAMap.LngLat(item.longitude,item.latitude),标题:item.label,});marker.content=createInfoWindow(item)marker.on('点击',onMarkerC舔）marker.setMap（_this.map）；})}functiononMarkerClick(e){if(infoWindow.getIsOpen()){infoWindow.close();}else{infoWindow.setContent(e.target.content)信息窗口。打开(_this.map,e.target.getPosition());}}//点击地图其他区域关闭信息窗口_this.map.on('click',function(){if(infoWindow.getIsOpen()){infoWindow.close();}})4.csspart//注意：css写在局部效果
无效 