Question

这里我动态获取数据我正在做的是我正在显示动态数据并用标记放置数据。显示动态地图我很好但在下面的问题我被卡住了我不知道如何前进

动态数据：

{
    "page": 2,

    "data": [
        {
            "id": 4,
            "first_name": "Eve",
            "last_name": "Holt",
            "lat":"25.6599899",
            "lng":"45.3664646",
            "status":"0"

        },
        {
            "id": 5,
            "first_name": "Charles",
            "last_name": "Morris",
            "lat":"25.99899",
            "lng":"45.4646",
             "status":"1"

        },
        {
            "id": 6,
            "first_name": "Tracey",
            "last_name": "Ramos",
            "lat":"25.2339899",
            "lng":"45.56664646",
            "status":"1"

        }
    ]
}

问题1：在**状态中 0 中的值，我必须计算有多少0和1

问题2：计数后假设状态1是否包含3个人，然后所有3个人姓名必须以按钮的形式显示（动态地），如果0表示单独一个

问题3创建动态按钮后，如果我点击带有某个名称的按钮，那么在地图上必须显示一个信息窗口，其中包含已经与该人放置的指定标记**

下面是我的动态标记代码

    addMarker(latlng, mapobj, markerLabel,iconColor) {

          this.iconDisplay =[];

         if(iconColor === "0"){
            this.iconDisplay = this.red;

         }else if(iconColor === "1"){
             this.iconDisplay = this.green;

         }else if(iconColor === "2"){
             this.iconDisplay = this.orange;

         }else if(iconColor === "3"){
          this.iconDisplay = this.building;
      };


        var marker = new google.maps.Marker({
          //zoom:this.zoomlevel,
          position: latlng,
          map: mapobj,
          icon:this.iconDisplay

        });

      debugger
        mapobj.setCenter(latlng);

        mapobj.setZoom(parseInt(localStorage.getItem('getz')));


        mapobj.addListener('zoom_changed', function() {
          mapobj.getZoom();
          localStorage.setItem('getz',mapobj.getZoom());
        });

    const infowindow = new google.maps.InfoWindow({
      content: markerLabel
    });

    google.maps.event.addListener(marker, 'click', function() {
     //infowindow1.open(Map,marker);

    });

    google.maps.event.addListener(marker,'mouseover', function() {
      infowindow.open(Map,marker);
  });

  google.maps.event.addListener(marker,'mouseout', function() {
    infowindow.close();
});

  //This is for by default opening infowindow
    // infowindow.open(Map, marker);

    const styless = [
      {
        "featureType": "poi.attraction",
        "stylers": [
          {
            "visibility": "off"
          }
        ]
      },

      {
        "featureType": "poi.medical",
        "stylers": [
          {
            "visibility": "off"
          }
        ]
      },
      {
        "featureType": "poi.park",
        "elementType": "labels.text",
        "stylers": [
          {
            "visibility": "off"
          }
        ]
      },
      {
        "featureType": "poi.place_of_worship",
        "stylers": [
          {
            "visibility": "off"
          }
        ]
      },
      {
        "featureType": "poi.school",
        "stylers": [
          {
            "visibility": "off"
          }
        ]
      },
      {
        "featureType": "poi.sports_complex",
        "stylers": [
          {
            "visibility": "off"
          }
        ]
      }
    ]

    mapobj.setOptions({styles: styless});
    // This is for set postion for the marker after getting dynamic data it posittions to the point

  mapobj.panTo(marker.position);

Answer 1

您可以通过参考下面的代码来实现这一目标：

const input = {
    "page": 3,
    "data": [{
        "id": 1,
        "first_name": "Niraj",
        "last_name": "Paudel",
        "lat": "454.454",
        "lng": "454545",
        "status": "0"
    },
    {
        "id": 2,
        "first_name": "Kushal",
        "last_name": "Shrestha",
        "lat": "235.99899",
        "lng": "452.4646",
        "status": "1"
    },
    {
        "id": 3,
        "first_name": "Ritesh",
        "last_name": "Sainju",
        "lat": "253.3439899",
        "lng": "423.56664646",
        "status": "1"

    }
    ]
}


let statusZeroObj  = input.data.filter(e => e.status === 0);
let statusOneObj = input.data.filter(e => e.status === 1);

//Issue 1
const countOfStatus0 = statusZeroObj.length;
const countOfStatus1 = statusOneObj.length;

//Issue 2
//suppose you need to append button with name "for status zero" in div id container0
statusZeroObj.forEach(function(statusZeroPerson) {
    addBtn('#container0', statusZeroPerson);
});

//suppose you need to append button with name "for status one" in div id container1
statusOneObj.forEach(function(statusOnePerson){
    addBtn('#container1', statusOnePerson);
});

function addBtn(id, person) {
    let btn = document.createElement("input");
    btn.type = button;
    btn.name =  person.first_name;
    btn.onClick = addMarker(person); //I am not totally sure what you want to do with marker
    document.getElementById(id).appendChild(btn);
}


// Issue 3
const addMarker = function(person) {
// implement the logic for marker
}

Answer 2

您可以使用.reduce计算零和一个数字：

＆＃13;

const input = {
  "page": 2,
  "data": [{
      "id": 4,
      "first_name": "Eve",
      "last_name": "Holt",
      "lat": "25.6599899",
      "lng": "45.3664646",
      "status": "0"
    },
    {
      "id": 5,
      "first_name": "Charles",
      "last_name": "Morris",
      "lat": "25.99899",
      "lng": "45.4646",
      "status": "1"
    },
    {
      "id": 6,
      "first_name": "Tracey",
      "last_name": "Ramos",
      "lat": "25.2339899",
      "lng": "45.56664646",
      "status": "1"

    }
  ]
}
const { zeroCount, oneCount } = input.data.reduce( ({ zeroCount = 0, oneCount = 0 } = {}, { status }) => {
  if (status === '0') zeroCount++;
  if (status === '1') oneCount++;
  return { zeroCount, oneCount }
}, {});
console.log('Zeros: ' + zeroCount + ' , Ones: ' + oneCount);

＆＃13;

如何计算对象属性值并在动态按钮中显示serparate值并为其分配点击事件

2 个答案: