在多次点击事件中保留Google地图InfoWindow内容

Question

在我的Google地图上，有多个带有相关信息窗口内容的标记。用户可以点击标记，查看信息窗口，并与信息窗口交互以在后端进行某些处理。根据后端（服务器）响应，我会更新信息窗口中的表单数据。这些表单数据是所选信息窗口和标记的唯一数据。到目前为止都很好。

问题出现在当我点击另一个标记并与该信息窗口交互时。当我选择之前的信息窗口时，它不保持最新状态，这意味着表单隐藏字段更改和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);
        });


    }

- Rajitha Bandara

---

客户端获取的HTML / JavaScript长什么样？您尝试过哪些方法来保留内容？请提供一个[Minimal，Complete，Tested and Readable example]（http://stackoverflow.com/help/mcve）。您的原始infoWindowContent数组会被标记单击侦听器重新呈现。 - geocodezip

Answer 1

你必须使用 DOMNode 作为内容，而不是字符串。

下面是一个简单的例子，它基于内容字符串创建 DOMNode：

  //a simple array with latitude, longitude and content-string
  var markers=[
          [0,0,'<div>Marker#1<br/><select><option>a<option>b<option>c</select>'],
          [0,1,'<div>Marker#2<br/><select><option>a<option>b<option>c</select>'],
          [0,2,'<div>Marker#3<br/><select><option>a<option>b<option>c</select>']
              ];
  var InfoWindow=new google.maps.InfoWindow();

  $.each(markers,function(i,item){
    var marker=new google.maps.Marker({map:map,
                                       position:{lat:item[0],lng:item[1]},
                                       //create a DOMNode based on the content
                                       //and store it as property of the marker
                                       content:$(item[2])[0]
                                      });
    google.maps.event.addListener(marker,'click',function(){
      //use the content-property of the marker(the DOMNode) as content
      InfoWindow.setContent(this.get('content'));
      InfoWindow.open(this.getMap(),this);
    });
  });

演示： http://jsfiddle.net/doktormolle/bojqeres/
（从下拉菜单中选择不同的选项，您会发现列表将保持其状态）

- Dr.Molle