Question

在这个页面中，我在顶部有一个由社区名称组成的表格，在此表格下面我有一个谷歌地图，显示放置的社区名称的标记位置。现在我想要做的是当我单击表格行中的删除按钮（即通过PHP函数delete_btn()）时，我需要删除与表格行对应的特定标记，其中删除按钮位置地图。我怎样才能做到这一点？

我在下面发布了我的代码结构：

<div>
    <table id="sum_table">
        <tr class="titlerow">
            <th>S.N.</th>
            <th>Community</th>
            <th width="18%">Action</th>
        </tr>
        <? 
        $sn = 1;
        while($result= mysql_fetch_row($res))
        {
            ?>
            <tr id="<?php echo $result[0];?>">
                <td align="center"><? echo $sn++; ?></td>
                <td align="center"><? echo $result[1] ?></td>
                <td>
                    <?php echo delete_btn("delete.php?id=", $result[0]); ?>
                </td>                       
            </tr>
            <?
        }
        ?>
    </table>
</div

<?php
$query="SELECT com_name,com_lat,com_lon FROM community where mun_id=10";
$result=mysql_query($query);
?>

<script type="text/javascript">
    var beaches = [
    <?php
    $i=0;
    if ($num>0){
        while ($r=mysql_fetch_array($result))   {
            ++$i;
            $i != $num ? $k=',' : $k='';
            ?>
            ['<?php echo $r['com_name'];?>',<?php echo $r['com_lat'];?>, <?php echo $r['com_lon'];?>]<?php echo $k?>
            <?php   }  }  ?>
            ];

            var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 8,
                center: new google.maps.LatLng( beaches[0][1], beaches[0][2]),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            });
            var infowindow = new google.maps.InfoWindow();
            var marker, i;
            var com_Image = {
                url: 'assets/img/icon/pin-single-1.png',
                size: new google.maps.Size(61, 72),
                origin: new google.maps.Point(0, 0),
                anchor: new google.maps.Point(0, 16)
            };
            var shape = {
                coords: [1, 1, 1, 20, 18, 20, 18, 1],
                type: 'poly'
            };

            for (i = 0; i < beaches.length; i++) {
                marker = new google.maps.Marker({
                    position: new google.maps.LatLng(beaches[i][1], beaches[i][2]),
                    icon: com_Image,
                    map: map
                });
                google.maps.event.addListener(marker, 'click', (function(marker, i) {
                    return function() {
                        infowindow.setContent(beaches[i][0]);
                        infowindow.open(map, marker);
                    }
                })(marker, i));
            }

        </script>

Answer 1

我创建了一个示例文件，用于执行您想要的链接在这段代码中，在不查询来自db的数据时，我只是模拟数据，所以如果你从db查询数据，你需要将它格式化为这样的东西

[[1, "LA", 34.0234697, -118.2532713], [2, "Chicago", 41.8718004, -87.9721186], [3, "New York", 40.7091269, -74.0112131]]

另一件事我没有为表格中的标记a添加css，你可以将其更改为按钮或为其添加css。

<!DOCTYPE html>
 <html>
    <head>
    <title>Manage Map Delete in table</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div>
      <?php $results = [[1, "LA", 34.0234697, -118.2532713], [2, "Chicago", 41.8718004, -87.9721186], [3, "New York", 40.7091269, -74.0112131]];?>
      <table id="sum_table">
        <tr class="titlerow">
            <th>S.N.</th>
            <th>Community</th>
            <th width="18%">Action</th>
        </tr>
        <? 
        $sn = 1;
        foreach ($results as $result)
        {
            ?>
            <tr id="<?php echo $result[0];?>">
                <td align="center"><? echo $sn++; ?></td>
                <td align="center"><? echo $result[1] ?></td>
                <td>
                  <a onClick="deleteData('<?php echo $result[0]; ?>');" >Delete</a>
                </td>                       
            </tr>
            <?
        }
        ?>
    </table>
    </div>
    <div id="map"></div>
    <script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>
    <script>
      var markers = [];
      var listLocation = {};
      var map;
      function initMap() {
        listLocation = <?php echo json_encode($results); ?>;
        var myLatlng = {lat:39.8004725, lng:-101.3308506}

        map = new google.maps.Map(document.getElementById('map'), {
          zoom: 4,
          center: myLatlng
        });

        //add all location
        addAllLocations(listLocation);
      }

      function createLatLong(data)
      {
        var output = {}
        output["lat"] = data[2];
        output["lng"] = data[3];
        return output;
      }
      function addAllLocations(datas)
      {
        for (var i=0;i<datas.length;i++){
          //create lat long data
          var latLng = createLatLong(datas[i]);
          //add to map
          addMarker(latLng);
        }
      }

      // Adds a marker to the map and push to the array.
      function addMarker(location) {
        var marker = new google.maps.Marker({
          position: location,
          map: map
        });
        markers.push(marker);
      }

      function deleteInTable(id)
      {
        $('#sum_table').find('#'+id).remove();
      }

      function deleteInMap(index)
      {
        markers[index].setMap(null);
      }

      function getIndex(id)
      {
        for (var i=0;i<listLocation.length;i++){
          if (listLocation[i][0] == id) {
            return i;
          }
        }
        return null;
      }

      function deleteData(id)
      {
        //delete in table
        deleteInTable(id);
        //delete in map
        //get index
        var index = getIndex(id);
        deleteInMap(index);
      }
    </script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=[GoogleApiKey]&callback=initMap">
    </script>
  </body>
</html>

希望这个帮助

Answer 2

使用标记上的.setMap()功能将其从地图中删除：

要从地图中删除标记，请调用setMap()方法作为参数传递null。¹
marker.setMap(null);
请注意，上述方法不会删除标记。它只是从地图中删除标记。如果您希望删除标记，则应将其从地图中删除，然后将标记本身设置为null。

为了在表格中删除项目的动作链接，我们需要让删除链接的id参数对应于JavaScript代码中标记列表中的项目。

<div>
<table id="sum_table">
    <tr class="titlerow">
        <th>S.N.</th>
        <th>Community</th>
        <th width="18%">Action</th>
    </tr>
    <?php
    $query="SELECT com_id, com_name,com_lat,com_lon FROM community where mun_id=10";
    $result=mysql_query($query);
    $sn = 1;
    $beaches = array();
    while($result= mysql_fetch_row($res))
    {
        //assuming 1 => com_name, 2 => com_lat, 3 => com_lon
        //assuming so, you should be able to do this instead: 
        //$beaches[] = array($result['com_name'], $result['com_lat'], $result['com_lon']);

        $beaches[] = array($result[1], $result[2], $result[3]);
        ?>
        <tr id="<?php echo $result[0];?>">
            <td align="center"><? echo $sn++; ?></td>
            <td align="center"><? echo $result[1] ?></td>
            <td>
                <button class="deleteMarker" data-id="delete_<?php echo ($sn - 1)); ?>">Remove</button>
            </td>                       
        </tr>
        <?
    }

    ?>
</table>

然后使用$beaches数组在Javascript中创建标记列表，并在单击处理程序中使用{{检查类名称（例如 deleteMarker ） 3}}。如果单击的元素具有该类，则使用String.indexOf()从 data-id 属性中获取要删除的索引。

<script type="text/javascript">
var beaches = <?php echo json_encode($beaches); ?>;

function clickHandlerDelegate(clickEvent) {
  if (clickEvent.target.className.indexOf('deleteMarker') > -1) {
    var index = clickEvent.target.dataset.id;
    markers[index].setMap(null);
  }
}
//rest of javascript - e.g. for creating map
</script>

请参阅下面的示例中演示的内容（特别是在函数 clickHandlerDelegate（）中，它使用the data attributes连接到单击事件）。

＆＃13;

var beaches = [
  ["Haringhata", 21.984606, 89.974250],
  ["West Bengal, India",
    21.681855, 88.584980
  ]
];
var markers = [];
var map; //set scope here so various functions can use them

function clickHandlerDelegate(clickEvent) {
  if (clickEvent.target.className.indexOf('deleteMarker') > -1) {
    var index = clickEvent.target.dataset.id;
    markers[index].setMap(null);
  }
}

function initialize() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 8,
    center: new google.maps.LatLng(beaches[0][1], beaches[0][2]),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  var infowindow = new google.maps.InfoWindow();
  var marker, i;
  var shape = {
    coords: [1, 1, 1, 20, 18, 20, 18, 1],
    type: 'poly'
  };

  for (i = 0; i < beaches.length; i++) {
    marker = new google.maps.Marker({
      position: new google.maps.LatLng(beaches[i][1], beaches[i][2]),
      map: map
    });
    google.maps.event.addListener(marker, 'click', (function(marker, i) {
      return function() {
        infowindow.setContent(beaches[i][0]);
        infowindow.open(map, marker);
      }
    })(marker, i));
    markers.push(marker);
  }

}
google.maps.event.addDomListener(window, "load", initialize);
//set up delegate
document.addEventListener('DOMContentLoaded', function() {
  document.addEventListener('click', clickHandlerDelegate);
});

＆＃13;

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js"></script>
<table id="sum_table">
        <tr class="titlerow">
            <th>S.N.</th>
            <th>Community</th>
            <th width="18%">Action</th>
        </tr>
        <tr>
        <td>1</td>
         <td>Haringhata</td>
         <td><button class="deleteMarker" data-id="0">Remove</button></td></tr>
        <tr>
        <td>2</td>
         <td>West Bengal, India</td>
         <td><button class="deleteMarker" data-id="1">Remove</button></td></tr>
         </table>
<div id="map"></div>

＆＃13;

¹ addEventListener()

如何根据位置列表从地图中删除标记？

2 个答案: