在我的Google地图上,有多个带有相关信息窗口内容的标记。用户可以点击标记,查看信息窗口,并与信息窗口交互以在后端进行某些处理。根据后端(服务器)响应,我会更新信息窗口中的表单数据。这些表单数据是所选信息窗口和标记的唯一数据。到目前为止都很好。
问题出现在当我点击另一个标记并与该信息窗口交互时。当我选择之前的信息窗口时,它不保持最新状态,这意味着表单隐藏字段更改和UI按钮状态更改不可见。信息窗口显示默认内容。因此,很明显每次都重新生成信息窗口。
我需要的是在与地图上其他标记交互时保留每个信息窗口中的更改。请问有人可以提供解决方案吗?谢谢。
问题出现在当我点击另一个标记并与该信息窗口交互时。当我选择之前的信息窗口时,它不保持最新状态,这意味着表单隐藏字段更改和UI按钮状态更改不可见。信息窗口显示默认内容。因此,很明显每次都重新生成信息窗口。
我需要的是在与地图上其他标记交互时保留每个信息窗口中的更改。请问有人可以提供解决方案吗?谢谢。
function initialize() {
var map;
var bounds = new google.maps.LatLngBounds();
var defaultCenter = new google.maps.LatLng(<?php echo $user_lat; ?>, <?php echo $user_lng; ?>);
var mapOptions = {
mapTypeId: 'roadmap',
center: defaultCenter,
panControl: true,
zoomControl: true,
scaleControl: true,
streetViewControl: true
};
// Display a map on the page
map = new google.maps.Map(document.getElementById("map"), mapOptions);
map.setTilt(45);
var markers = [];
var infoWindowContent = [];
// Multiple Markers
<?php if (!empty($plumbers)): ?>
markers = [
<?php foreach ($plumbers as $result): ?>
['<?php echo $result['first_name']; ?>', <?php echo $result['lat']; ?>, <?php echo $result['lng']; ?>],
<?php endforeach; ?>
];
<?php endif; ?>
// Info Window Content
<?php if (!empty($plumbers)): ?>
infoWindowContent = [
<?php foreach ($plumbers as $result): ?>
['<div class="info_content">' +
'<h3><?php echo $result['first_name'] . ' - ' . $result['location']; ?></h3>' +
'<?php echo number_format($result['distance'], 2); ?> miles away' +
//'<p><?php //echo anchor('plumbers/assign/' . $result['location'] . '/' . $service_id . '/' . $service_type_id . '/' . $customer_id . '/' . $result['id'], 'Assign'); ?></p>' +
"<form method='post'>" +
"<input type='hidden' name='<?php echo $this->security->get_csrf_token_name(); ?>' value='<?php echo $this->security->get_csrf_hash(); ?>'>" +
"<input type='hidden' name='plumber_id' id='plumber_id' value='<?php echo $result['id']; ?>'>" +
"<input type='hidden' name='location' id='location' value='<?php echo $result['location']; ?>'>" +
"<input type='hidden' name='lat' id='lat' value='<?php echo $result['lat']; ?>'>" +
"<input type='hidden' name='lng' id='lng' value='<?php echo $result['lng']; ?>'>" +
"<input type='hidden' name='service_id' id='service_id' value='<?php echo $service_id; ?>'>" +
"<input type='hidden' name='service_type_id' id='service_type_id' value='<?php echo $service_type_id; ?>'>" +
"<input type='hidden' name='customer_id' id='customer_id' value='<?php echo $customer_id; ?>'>" +
"<button type='button' class='btn-assign btn btn-success btn-sm' data-status='unassigned' data-cs-id=''><i class='fa fa-plus'></i> Assign</button>" +
"<input type='hidden' name='cs_id' id='cs_id' value=''>" +
"<img src='<?php echo base_url('assets/img/loader.GIF'); ?>' class='assign-loader'>" +
"</form>" +
'</div>'],
<?php endforeach; ?>
];
<?php endif; ?>
// Display multiple markers on a map
var infoWindow = new google.maps.InfoWindow(), marker, i;
// Loop through our array of markers & place each one on the map
for (i = 0; i < markers.length; i++) {
var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
bounds.extend(position);
marker = new google.maps.Marker({
position: position,
map: map,
title: markers[i][0]
});
// Allow each marker to have an info window
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infoWindow.setContent(infoWindowContent[i][0]);
infoWindow.open(map, marker);
}
})(marker, i));
//Handle click assign button
// google.maps.event.addListener(infoWindow, 'domready', function() {
// $("body").on('click', '.btn-assign', function(e) {
// alert('');
// });
// });
// Automatically center the map fitting all markers on the screen
map.setCenter(bounds.getCenter());
map.fitBounds(bounds);
}
// Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
this.setZoom(12);
google.maps.event.removeListener(boundsListener);
});
}