Vueはjsforループを使用して、変数名を動的に生成し、値を割り当てます

望ましい効果:

var marker1 = new BMap.Marker(new BMap.Point(res.data.data[0].gpsX, res.data.data[0].gpsY),{
    
    icon:myIcon});
var marker2 = new BMap.Marker(new BMap.Point(res.data.data[1].gpsX, res.data.data[1].gpsY),{
    
    icon:myIcon2});
var marker3 = new BMap.Marker(new BMap.Point(res.data.data[2].gpsX, res.data.data[2].gpsY),{
    
    icon:myIcon2});
var marker4 = new BMap.Marker(new BMap.Point(res.data.data[3].gpsX, res.data.data[3].gpsY),{
    
    icon:myIcon});
       
map.addOverlay(marker1);
map.addOverlay(marker2);
map.addOverlay(marker3);
map.addOverlay(marker4);

forループの実装:

this.$axios({
    
    
        url: "/api/device/jiankongDevice/getJiankongDeviceAllList",
        method: "get",
        headers: {
    
    
          "X-Requested-With": "XMLHttpRequest",
          platform: 0,
          token: localStorage.getItem("token"),
        },
        params: {
    
    },
      }).then((res) => {
    
    
        console.log(res);
        for(var i in res.data.data){
    
    
          var marker = 'marker'+i
          marker=new BMap.Marker(new BMap.Point(res.data.data[i].gpsX, res.data.data[i].gpsY),{
    
    icon:myIcon});
          map.addOverlay(marker);
        } 

生成された各変数にイベントを追加する場合は、イベントリスナーaddEventListener()を使用する必要があり、クロージャーを使用する必要があります。詳細については、次の記事を参照してください。

おすすめ

転載: blog.csdn.net/GongWei_/article/details/112305493