我有一个 html 表,其中包含位置信息列表,其位置显示在带有标记的谷歌地图中。现在,当我单击给定表行中的更改按钮时,相关标记颜色将被更改。我尝试过以下代码,但它仅更改 1 个标记颜色。
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);
});
});
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>
最佳答案
您的代码中有一个拼写错误:
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
(最后一个在您的环形)。点击事件是来自 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>
关于javascript - 根据 html 表中所做的选择更改 google 标记的颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47066794/