Question

我有一个html表，其中包含位置信息列表，其位置显示在带有标记的谷歌地图中。现在，当我单击该给定表格行中的更改按钮时，将更改相关的标记颜色。我尝试过以下代码，但它只更改了1种标记颜色。

＆＃13;

var beaches = [
  ["Haringhata", 21.984606, 89.974250],
  ["West Bengal, India",
    21.681855, 88.584980
  ]
];
var markers = [];
var map;


function changeColor(clickEvent) {
  this.marker_point.setIcon('http://maps.google.com/mapfiles/ms/icons/green-dot.png');
}

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
    });
    this.marker_point = marker;
    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);


$(function() {
  $('.deleteMarker').on('click', function(e) {
    var dataId = $(this).closest('td')[0].dataset.id;
    changeColor(dataId);
  });
});

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.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 data-id="0"><button class="deleteMarker">Change</button></td>
  </tr>
  <tr>
    <td>2</td>
    <td>West Bengal, India</td>
    <td data-id="1"><button class="deleteMarker">Change</button></td>
  </tr>
</table>
<div id="map"></div>

＆＃13;

Answer 1

您的代码中有拼写错误：

function changeColor(clickEvent) {
  this.marker_point.setIcon('http://maps.google.com/mapfiles/ms/icons/green-dot.png');
}

应该是：

function changeColor(clickEvent) {
  markers[clickEvent].setIcon('http://maps.google.com/mapfiles/ms/icons/green-dot.png');
}

该事件监听器中的

this引用window对象，只有一个window.marker_point（循环中设置的最后一个）。 Click事件是HTML中的data-id，用于引用markers数组中的正确标记。

这与问题Google Maps JS API v3 - Simple Multiple Marker Example中的infowindow侦听器函数闭包中解决的问题相同，并且是循环中异步函数变量的常见问题。

var beaches = [
  ["Haringhata", 21.984606, 89.974250],
  ["West Bengal, India",
    21.681855, 88.584980
  ]
];
var markers = [];
var map;


function changeColor(clickEvent) {
  markers[clickEvent].setIcon('http://maps.google.com/mapfiles/ms/icons/green-dot.png');
}

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
    });
    this.marker_point = marker;
    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);


$(function() {
  $('.deleteMarker').on('click', function(e) {
    var dataId = $(this).closest('td')[0].dataset.id;
    changeColor(dataId);
  });
});

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.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 data-id="0"><button class="deleteMarker">Change</button></td>
  </tr>
  <tr>
    <td>2</td>
    <td>West Bengal, India</td>
    <td data-id="1"><button class="deleteMarker">Change</button></td>
  </tr>
</table>
<div id="map"></div>

根据html表中的选择更改google标记的颜色

1 个答案: