jquery使用高德地图实现标记点和窗体

最新推荐文章于 2023-10-27 11:15:51 发布

Wxinin

最新推荐文章于 2023-10-27 11:15:51 发布

阅读量1.2k

点赞数 2

分类专栏： jquery js 高德地图文章标签： AMap 设备定位在线状态信息窗口 Marker

本文链接：https://blog.csdn.net/weixin_44283589/article/details/121957172

版权

js 同时被 3 个专栏收录

71 篇文章 1 订阅

订阅专栏

jquery

4 篇文章 0 订阅

订阅专栏

高德地图

2 篇文章 0 订阅

订阅专栏

** /*    弹窗样式*/
        .amap-info-content {
            width: 12.76vw;
            height: 13.89vh;
            padding: 2.5vh 1.5vw 1vh 1.5vw;
            box-sizing: border-box;
            background: url("static/img/bigDataBreed/breed17.png") no-repeat
            center/100% 100%;
            display: flex;
            position: relative;
        }
        .titleLeft {
            position: absolute;
            top: 0;
            left: 0.5vw;
            font-size: 1.48vh;
            font-family:YouSheBiaoTiHei;
            font-weight: 400;
            color: #ffffff;
        }
        .titleRight {
            left: auto !important;
            top: 0.8vh;
            right: 0.94vw;
            font-size: 1.11vh;
        }
        .infoBox {
            height: 10vh;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            /* margin-left: 0.52vw; */
            width: 100%;
        }

        .infoBox p {
            font-size: 1.3vh;
            font-family: YouSheBiaoTiHei;
            font-weight: 400;
            color: #dbf3ff;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;

        }
        .colorOn {
            color: #80ee03 !important;
        }**

var markerList=[
{
id:0,
deviceNumber:'0B36D1263012',
name:'一号设备',
onLineState:1,
latitude:'36.0391',
longitude:'103.8246',
},
{
id:1,
deviceNumber:'0B36D1263012',
name:'二号设备',
onLineState:1,
latitude:'36.0633',
longitude:'103.849',
},
{
id:2,
deviceNumber:'0B36D1653012',
name:'三号设备',
onLineState:1,
latitude:'36.0762',
longitude:'103.8215',
},
{
id:3,
deviceNumber:'967A00446E4A',
name:'四号设备',
onLineState:1,
latitude:'36.0679',
longitude:'103.825',
},
{
id:4,
deviceNumber:'5D2E4078F486',
name:'五号设备',
onLineState:0,
latitude:'36.0391',
longitude:'103.8347',
},
]
addAmapLip();
function addAmapLip() {
        if (!map) {
            map = new AMap.Map('breedMap', {
                center: [103.823557, 36.058039],
                layers: [new AMap.TileLayer.Satellite(),new AMap.TileLayer.RoadNet()],
                offset: new AMap.Pixel(-13, -30),

                zoom: 10, //设置初始化级别
                zooms: [3, 14], //设置缩放级别范围 3-20 级
                // mapStyle: "amap://styles/blue", //设置地图的显示样式
                resizeEnable: true,
                expandZoomRange: true,
            });
        }
        map.remove(listMarkes);
        if (!markerList[0]) return;
        listMarkes = [];
        let marker = null;
        var stateSet={
            1: "在线",
            0: "离线",
        };
        var stateColor={
            1: "#2cdc97",
            0: "red",
        };
        markerList.forEach((val) => {
            var img = ''
            if (val.onLineState == 0) {
                img = 'static/img/bigDataBreed/breed12.png';
            } else {
                img = 'static/img/bigDataBreed/breed13.png';
            }
            marker = new AMap.Marker({
                position: [val.longitude, val.latitude],
                offset: new AMap.Pixel(-10, -10),
                icon: img, // 添加 Icon 图标 URL
                // title: '北京'
                autoRotation: true,
                cursor: 'pointer',
                offset: new AMap.Pixel(-5, -20),
                // angle:0,
                // dragEnable: true
            });
            listMarkes.push(marker)
            map.add(marker);
            marker.deviceNumber = val.deviceNumber;
            marker.content=`<h4 class="titleLeft">
      设备详情
      </h4>
      <div class="infoBox">
      <p>
      设备名称：${val.name}
      </p>
      <p>
      设备编号：${val.deviceNumber}
      </p>
     <p>
      设备地址： ${val.longitude},${val.latitude}
      </p>
      <p>
      当前状态：<span style="color:${stateColor[val.onLineState]}">${
                stateSet[val.onLineState]
            }</span>
      </p>
      </div>`
            marker.on('click', function (e) {
                var infoWindow = new AMap.InfoWindow({
                    offset: new AMap.Pixel(16, -50),
                    content: e.target.content, //传入 dom 对象，或者 html 字符串
                });
                // 打开信息窗体
                infoWindow.open(map);
                infoWindow.open(map, [e.lnglat.lng, e.lnglat.lat]);
            })

        })
        // map.setFitView(lanLatList);
        map.setFitView(listMarkes)
    };