Question

我很难显示不同的标记颜色。这种标记的颜色差异是基于数据库中的值。

此代码用于显示地图和标记

<script src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY"
  type="text/javascript">
</script> 
<script type="text/javascript">
  var map;
  function init(){
    map = new google.maps.Map(document.getElementById('maps'), {
      zoom: 10,
      center: new google.maps.LatLng(-7.320795, 112.731386),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    <?php foreach($get_data->result() as $row) {
      $nilai = $row->nilai;
      if($nilai >= 0 && $nilai <=50) {?>
        var icons = {
          info: {
            icon: '<?php echo base_url("assets/marker_merah.png");?>'
          }
        };
      <?php }elseif($nilai >= 51 && $nilai <=69){ ?>
        var icons = {
          info: {
            icon: '<?php echo base_url("assets/marker_hijau.png");?>'
          }
        };
      <?php }elseif($nilai >= 70) { ?>
        var icons = {
          info: {
            icon: '<?php echo base_url("assets/marker_biru.png");?>'
          }
        };
      <?php }
    } ?>

    var features = [
    <?php foreach($get_data->result() as $row){ ?>
      {
        position: new google.maps.LatLng(<?php echo $row->lat;?>,<?php echo $row->long;?>),
        type: 'info',
        title : '<?php echo $row->nama;?>'
      },
    <?php } ?>
    ];

    // Create markers.
    features.forEach(function(feature) {
      var marker = new google.maps.Marker({
        position: feature.position,
        icon: icons[feature.type].icon,
        title: feature.title,
        map: map
      });
    });
  }
 google.maps.event.addDomListener(window, 'load', init);
</script>

我想显示0到50的红色标记，绿色显示51-69的标记，蓝色70或更高的标记。

运行上面的代码后，我发现所有标记都只是绿色，而没有出现红色和蓝色标记。

请帮助我。

Answer 1

您在代码中两次执行了以下循环<?php foreach($get_data->result() as $row) {。

第一次使用JavaScript生成类似

的内容

var icons = {
   info: {
        icon: 'assets/marker_hijau.png'
   }
};

var icons = {
    info: {
        icon: 'assets/marker_merah.png>'
    }
};

var icons = {
    info: {
        icon: 'assets/marker_biru.png>'
    }
};

var icons = {
    info: {
        icon: 'assets/marker_merah.png>'
    }
};

因此，您只需多次重新定义相同的变量，显然JavaScript将使用您分配给icons变量的最后一个值。

第二个循环创建一个数组结构，我建议也将图标初始化也放入第二个循环，这样您就可以定义每个功能的icon属性并在以后的JavaScript中使用它。

我会将您的代码重写为类似于

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"
  type="text/javascript">
</script> 
<script type="text/javascript">
  var map;
  function init(){
    map = new google.maps.Map(document.getElementById('maps'), {
      zoom: 10,
      center: new google.maps.LatLng(-7.320795, 112.731386),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var features = [
    <?php foreach($get_data->result() as $row) { 
      $nilai = $row->nilai; ?>
      {
        position: new google.maps.LatLng(<?php echo $row->lat;?>,<?php echo $row->long;?>),
        type: 'info',
        <?php if($nilai >= 0 && $nilai <=50) {?>
            icon: '<?php echo base_url("assets/marker_merah.png");?>',
        <?php } elseif($nilai >= 51 && $nilai <=69) { ?>
            icon: '<?php echo base_url("assets/marker_hijau.png");?>',
        <?php } elseif($nilai >= 70) { ?>
            icon: '<?php echo base_url("assets/marker_biru.png");?>',
        <?php } ?>
        title : '<?php echo $row->nama;?>'
      },
    <?php } ?>
    ];

    // Create markers.
    features.forEach(function(feature) {
      var marker = new google.maps.Marker({
        position: feature.position,
        icon: feature.icon,
        title: feature.title,
        map: map
      });
    });
  }
 google.maps.event.addDomListener(window, 'load', init);
</script>

我希望这会有所帮助！

Answer 2

Xenomena是正确的，您是js彼此替换了..我猜您是从

获得代码的

https://developers.google.com/maps/documentation/javascript/custom-markers 您必须小心地看到那里有多维数组。

     var icons = {
      parking: {
        icon: iconBase + 'parking_lot_maps.png'
      },
      library: {
        icon: iconBase + 'library_maps.png'
      },
      info: {
        icon: iconBase + 'info-i_maps.png'
      }
    };

所以，我的答案是：

        var icons = {
      info1: {
        icon: 'icons/blue.png'
      },
      info2: {
        icon: 'icons/white.png'
      },
      info3: {
        icon: 'icons/red.png'
      }
    };

这就是为图标制作mltiDimension数组，然后我在get_lang数组中创建自己的latlong数据，在get_data数组中创建nilai数据：

foreach($get_lat as $i=>$row){ ?>
  {
    position: new google.maps.LatLng(<?php echo $row[0];?>,<?php echo $row[1];?>),
<?php
  if($get_data[$i] <50) {?>
    type: 'info1',
  <?php } elseif ($get_data[$i] >= 51 && $get_data[$i] <=69){ ?>
    type: 'info2',
  <?php } else { ?>
    type: 'info3',
  <?php } ?>
    title : "<?php echo $row[0];?>"
  },
<?php } ?>
];

建议，下次发布代码时，也需要发布示例输入。

完整的作品代码：

https://pastebin.com/dWj5wjTE

希望获得帮助。

难在PHP中显示不同的标记颜色

2 个答案: