< ! doctype html>
< html> < head> < meta charset = "utf-8" > < meta http-equiv= "X-UA-Compatible" content = "IE=edge" > < meta name = "viewport" content = "initial-scale=1.0, user-scalable=no, width=device-width" > < title> 默认样式信息窗体< /title> < link rel = "stylesheet" href = "https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" /> < style> html,body,height: 100 %; width: 100 %; } .content-window-card { position: relative; box-shadow: none; bottom: 0 ; left: 0 ; /* width: auto; */width: 28rem; padding: 0 ; } .content-window-card p { height: 2rem; } .custom-info { border: solid 1px silver; } div.info-top { position: relative; background: none repeat scroll 0 0 border-bottom: 1px solid border-radius: 5px 5px 0 0 ; } div.info-top div { display: inline-block; color: font-size: 14px; font-weight: bold; line-height: 31px; padding: 0 10px; } div.info-top img { position: absolute; top: 10px; right: 10px; transition-duration: 0 .25s; } div.info-top img:hover { box-shadow: 0px 0px 5px } div.info-middle { font-size: 12px; padding: 10px 6px; line-height: 20px; } div.info-bottom { height: 0px; width: 100 %; clear: both; text-align: center; } div.info-bottom img { position: relative; z-index: 104 ; } span { margin-left: 5px; font-size: 11px; } .info-middle img { float: left; margin-right: 6px; } .info-span { /* margin-left: 35px; */font-size: 11px; } .info-div { width: 140px; display: inline-block; margin-left: 10px; } .info-img { width: 40px; height: 40px; } .info-a-title { /* color: font-size: 16px; } < /style> < /head> < body> < div id = "container" > < /div> < div class = "info" > 点击地图上的点标记，打开所添加的自定义信息窗体< /div> < script type = "text/javascript" src = "https://webapi.amap.com/maps?v=1.4.15&key=您的高德key" > < /script> < script type = "text/javascript" > var devInfo = nullvar map = createMap( ) //1.new 一个map对象map.clearMap( ) ; //2.清空MapaddMarker( ) //3.创建点标记//1创建map对象，function createMap ( ) { //1.地图初始化时，在地图上添加一个marker标记,鼠标点击marker可弹出自定义的信息窗体var mapData = new AMap.Map( "container" , { resizeEnable: true,center: [ 115.064965 ,35.383416] , //地图展示中心点位置zoom: 16 ,mapStyle: 'amap://styles/grey' // 设置地图样式为深色模式} ) ; return mapData} //2添加点标记function addMarker ( ) { var markerData = [ { title: '1号厂区' ,icon: "img/gc1.png" , //点标记图片路径position: [ 115.065955 ,35.383416] ,offset: new AMap.Pixel( -8, -30) } , { title: '2号厂区' ,icon: "img/gc2.png" , //点标记图片路径position: [ 115.067945 ,35.383416] ,offset: new AMap.Pixel( -3, -30) } , { title: '3号厂区' ,icon: "img/gc3.png" , //点标记图片路径position: [ 115.068935 ,35.383416] ,offset: new AMap.Pixel( -12, -30) } ] var arr = [ ] markerData.forEach(( item) = > {var marker = new AMap.Marker( {icon: item.icon, / / 点标记图片路径position: item.position, / / 位置offset: item.offset / / 偏移}) ; arr.push( Object.assign( item, {mapId: marker._amap_id})) ( map) ; // 鼠标点击marker弹出自定义的信息窗体AMap.event.addListener( marker, 'click' , function( e) { markerClick( arr, marker) } ) ; // 添加闪烁特效// setInterval( function ( ) { // if ( marker.getAnimation( ) == = 'AMAP_ANIMATION_NONE' ) { // marker.setAnimation( 'AMAP_ANIMATION_BOUNCE' ) ; // } else { // marker.setAnimation( 'AMAP_ANIMATION_NONE' ) ; // } // } , 1000 ) ; setInterval( function ( ) { if ( marker.getAnimation( ) == = 'AMAP_ANIMATION_NONE' ) { marker.setAnimation( 'AMAP_ANIMATION_BOUNCE' ) ; // 更换为下落动画效果} else { marker.setAnimation( 'AMAP_ANIMATION_NONE' ) ; } } , 1000 ) ; } ) } //点击标记 获取所点击标记的信息以及窗体要展示的数据，创建信息窗体function markerClick( arr, marker) { var arrNew = arr.filter( x = > x.mapId == marker._amap_id) devInfo = arrNew && arrNew[ 0 ] var infoWindow = createInfoWindow( ) openInfoWindow( infoWindow, marker) } //构建自定义窗体function createInfoWindow ( ) { var infoWindowData = new AMap.InfoWindow( { isCustom: true, //使用自定义窗体content: getContent( ) ,offset: new AMap.Pixel( 16 , -45) } ) ; return infoWindowData} //处理窗体内容function getContent ( ) { var content = ` < div class = "custom-info input-card content-window-card" > < div class = "info-top" > < div> < span> ${ devInfo.title} < /span> < span style = "font-size:11px; margin-left:20px;color:#F00;" > 状态：正在运行< /span> < /div> < imgonclick = "closeInfoWindow" src = "https://webapi.amap.com/images/close2.gif" > < /div> < div class = "info-middle" style = "background-color: white;" > < img class = "info-img" src = "img/dev.png" > < aclass = "info-a-title" href = "https://ditu.amap.com/detail/B000A8URXB?citycode=110105" > XXXXXXXXXXX< /a> < br> 地址：XXXXXXXXXXXXXXXXXXXXXXX< br> < div class = "info-div" > 总用电：5428542° < /div> < span class = "info-span" > 总用气：454575NM< br> < div class = "info-div" > 发酵罐：210个 < /div> < span class = "info-span" > 总用水量：19999111T< /span> < br> < div class = "info-div" > 工作年限：10年< /div> < span class = "info-span" > 总产量：27784T< /span> < br> < div class = "info-div" > 建厂时间：2011.09.08 <> < span class = "info-span" > 建筑面积：1200M3 <> < /span> < /div> < div class = "info-bottom" style = "position: relative; top: 0px; margin: 0px auto;" > < imgsrc = "https://webapi.amap.com/images/sharp.png" > < /div> < /div> ` return content} //打开窗体function openInfoWindow( infoWindow, marker) { debuggerinfoWindow.open( map, marker.getPosition( )) ; } //关闭窗体function closeInfoWindow ( ) { map.clearInfoWindow( ) ; } < /script> < /body>
< /html>
)
