创建并修改标注（VUE下的百度地图）

Posted 2023-05-10

参考技术A 未点击标注前的地图展示效果

点击标注后的地图展示效果

百度地图概述
百度地图DEMO
百度地图API 类参考

百度地图循环添加标注，并循环为鼠标悬停标注时信息窗口问题解决

 //设备在地图上进行标注
    function GetGateInfo(vSID, vMap) {

        var icon = "../Content/easyui/themes/icons/gate.png";
        var myIcon = new BMap.Icon(icon, new BMap.Size(32, 32), {
            offset: new BMap.Size(32, 32)
        });

        $.ajax({
            type: "post",
            url: "/MonitorManage/GetStationGate?SID=" + vSID,
            success: function (obj) {
              
                    for (var i = 0; i < obj.length; i++) {
                        //var vGateID = obj[i].GateID;
                        //var vGateName = obj[i].GateName;
                        //var vlongitude = obj[i].Longitude;
                        //var vlatitude = obj[i].Latitude;

                        //var point = new BMap.Point(obj[i].Longitude, obj[i].Latitude);     //POI点坐标
                        //var marker = new BMap.Marker(point, { icon: myIcon });
                        //vMap.addOverlay(marker);

                       
                        (function (x) {
                            var point = new BMap.Point(obj[x].Longitude, obj[x].Latitude);    // 创建点坐标  
                            alert(point);
                            var marker = new BMap.Marker(point，{icon：myIcon});
                            // 创建信息窗口对象，引号里可以书写任意的html语句。
                            var infoWindow = new BMap.InfoWindow
                                ("<table class=‘mytable‘  border=‘0‘ cellspacing=‘0‘ cellpadding=‘0‘>"
                                + "<tr><td>站点名称：" + obj[x].GateName
                                + "</td></tr><tr><td>经度：" + obj[x].Longitude
                                + "</td></tr><tr><td>纬度：" + obj[x].Latitude
                                + "</td></tr></table>");

                            // 鼠标移上标注点要发生的事
                            marker.addEventListener("mouseover", function () {
                                this.openInfoWindow(infoWindow);
                            });

                            // 鼠标移开标注点要发生的事
                            marker.addEventListener("mouseout", function () {
                                this.closeInfoWindow(infoWindow);
                            });
                            vMap.addOverlay(marker);
                        })(i);
                        //// 创建信息窗口对象，引号里可以书写任意的html语句。
                        //var infoWindow = new BMap.InfoWindow
                        //    ("<table class=‘mytable‘  border=‘0‘ cellspacing=‘0‘ cellpadding=‘0‘>"
                        //    + "<tr><td>站点名称：" + vGateName
                        //    + "</td></tr><tr><td>经度：" + vlongitude
                        //    + "</td></tr><tr><td>纬度：" + vlatitude
                        //    + "</td></tr></table>");

                        //// 鼠标移上标注点要发生的事
                        //marker.addEventListener("mouseover", function () {
                        //    this.openInfoWindow(infoWindow,point);
                        //});

                        //// 鼠标移开标注点要发生的事
                        //marker.addEventListener("mouseout", function () {
                        //    this.closeInfoWindow(infoWindow, point);
                        //});
                    }
                }
            
        })
    }