anxiao_web/pages/video/js/marker/schoolMarker.js

import { stationInfoTableList,mainMap} from "../index.js";
import { showSchoolBaseInfo } from "../schoolBaseInfo.js";
import { getSchoolInfoDiv } from "../schoolBaseInfo.js";
let deviceMarkerHash={};
function addDeviceMarkerHash(key,value){
    deviceMarkerHash[key] = value;
}
//清空所有的marker 
function emptyDeviceMarker(){
    for(var d in deviceMarkerHash){
        delDeviceMarker(d);
    }
}

//删除marker
function delDeviceMarker(key){
    if(key in deviceMarkerHash){
        mainMap.remove(deviceMarkerHash[key]);
        delete deviceMarkerHash[key];
    }
}

function  drawSchoolMarker(){	
    stationInfoTableList.forEach(item=>{
        addDeviceMarker(item); 
    })
   
}
//添加marker
function addDeviceMarker(obj){	
    var deviceid=obj["deviceid"];
    var longitude=obj["longitude"];
    var latitude=obj["latitude"];
    var img=`./pages/cmddispatch/image/xiaoan-xx.svg`
    var content=`
    <div class="indexMarkerImg" >
        <img src='${img}'>
    </div>`;
    var deviceMarker = new AMap.Marker({//用来画marker 
       content:content,
        position: new AMap.LngLat(longitude, latitude),
        offset: new AMap.Pixel(-21, -19),
        zIndex:14
    });	
    deviceMarker.setMap(mainMap);
    deviceMarker.on('click',function(){
        showSchoolBaseInfo(obj);
        openSchoolInfoWindow(obj);
    })
    addDeviceMarkerHash(deviceid,deviceMarker); 
}


function openSchoolInfoWindow(obj){
    var deviceInfoWindow = new AMap.InfoWindow({
        isCustom: true, //使用自定义窗体
        content:createSchoolInfowindow(obj),
        offset: new AMap.Pixel(5, 10)
    });
    deviceInfoWindow.open(mainMap,[obj["longitude"],obj["latitude"]]);
    mainMap.setCenter([obj["longitude"],obj["latitude"]]);
   // mainMap.setZoomAndCenter(18,[obj["longitude"],obj["latitude"]])
}


function createSchoolInfowindow(obj){
    var mdinfo = document.createElement("div");
    mdinfo.className = "mdinfo";
    //定义顶部标题
    var mdinfoTop = document.createElement("div");
    var userinfotop = document.createElement("div");

    var closeX = document.createElement("img");
    mdinfoTop.className = "mdinfoTop";  

    var userinfoSpan=document.createElement("span");
    userinfoSpan.innerHTML=`<span>${obj["name"]}</span>`
    var deviceinfoSpan=document.createElement("span");
    deviceinfoSpan.innerHTML=`<span>${obj["borough"]}</span>`

    userinfoSpan.className="mapTitleBg";
    userinfotop.append(userinfoSpan);
    //userinfotop.append(deviceinfoSpan);
  
    
    closeX.src = "./pages/cmddispatch/image/closeInfoWindow.png";
    mdinfoTop.append(userinfotop);
    mdinfoTop.append(closeX);
    closeX.onclick=closeInfoWindow;

    userinfoSpan.onclick=function(){
         mdinfoCenter.innerHTML=getSchoolInfoDiv(obj);
        userinfoSpan.className="mapTitleBg";
        deviceinfoSpan.className="";
    }

    deviceinfoSpan.onclick=function(){
       // mdinfoCenter.innerHTML=showDeviceInfoWindow(deviceid)
        userinfoSpan.className="";
        deviceinfoSpan.className="mapTitleBg";
    }

    //定义中间部分
    var mdinfoCenter=document.createElement("div");
    mdinfoCenter.className = "mdinfoCenter";
    mdinfoCenter.innerHTML=getSchoolInfoDiv(obj);
    //定义底部操作按钮
    var mdinfoBottom=document.createElement("div");
    mdinfoBottom.className = "mdinfoBottom";
   
    mdinfo.appendChild(mdinfoTop);
    mdinfo.appendChild(mdinfoCenter);
   // mdinfo.appendChild(mdinfoBottom);
    return mdinfo;
}

//关闭信息窗体
function closeInfoWindow() {
    mainMap.clearInfoWindow();
}



export {
     drawSchoolMarker,
    openSchoolInfoWindow,
    closeInfoWindow
}