php - google map 多标记工具提示仅显示在 firefox 中的第一个标记上

Question

我正在开发一个 codeigniter 项目，该项目在谷歌地图中显示了在特定时间段内带有标记的已访问路径。 map 、标记、工具提示、折线在 chrome 中一切正常。

但在 firefox 中，当鼠标悬停时，只有 一个 工具提示显示在标记上。其他工具提示不显示。然后，如果我点击 map 的外部并再次将鼠标悬停在工具提示显示的任何标记上，但在其他标记上不会。这对每个标记都是一样的。问题是仅在 firefox 中。我从数据库中获取位置。 jsfiddle 链接是:http://jsfiddle.net/msz08tjx/以下是完整代码:

<script>
    jQuery(document).ready(function(){

$('#frmGPSTag').validationEngine('attach',{
            onValidationComplete: function(form, status){
                if (status == true){
                    mapDisplay();
                }
            }
        });

function mapDisplay(){                          
            $.getJSON('<?php echo base_url(); ?>user/gps_tags_json/'+$("#datepicker1").val()+'/'+$("#datepicker2").val(), function(data){
                var locations = new Array();
                $.each( data, function( key, val ) {
                    var location = [ parseFloat(val.latitude), parseFloat(val.longitude), val.gps_tag_timestamp];
                    locations.push(location);
                });
                if(locations.length > 0)
                {
                    $("#map").css({'height': '600px'});

                    var map = new google.maps.Map(document.getElementById('map'), {
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                    });

                    var marker, point, travelCoordinates = new Array();
                    var bounds = new google.maps.LatLngBounds();

                    for (var i = 0; i < locations.length; i++) {
                        point = new google.maps.LatLng(locations[i][0], locations[i][1]);
                          marker = new google.maps.Marker({
                            position: point,
                            map: map,
                            title: locations[i][2]
                          });

                        travelCoordinates[i] = point 
                        bounds.extend(marker.position); 
                    }
                    map.fitBounds(bounds);
                    if(map.getZoom()> 10){
                    map.setZoom(10);
                    }

                    var travelPath = new google.maps.Polyline({
                        path: travelCoordinates,
                        geodesic: true,
                        strokeColor: '#FF0000',
                        strokeOpacity: 1.0,
                        strokeWeight: 2
                    });

                    travelPath.setMap(map); 
                }
                else
                {
                    $("#map").empty();
                    $("#map").css({'background-color': '','height': 'auto'});
                    $("#map").html("<?php echo '<ul class=\"list-group\"><li class=\"list-group-item list-group-item-warning\">'.$this->lang->line('no_record').'</li></ul>'; ?>");
                }
            });     
        }

    });
</script>

我的日期选择器函数是:

<script type="text/javascript">
    $(function() {
       $( "#datepicker1" ).datepicker({
          dateFormat: 'yy-mm-dd',
          onClose: function( selectedDate ) {
            $( "#datepicker2" ).datepicker( "option", "minDate", selectedDate );
          }
      });

      $( "#datepicker2" ).datepicker({
          dateFormat: 'yy-mm-dd',
          onClose: function( selectedDate ) {
            $( "#datepicker1" ).datepicker( "option", "maxDate", selectedDate );
          }
      });
    });
</script>

我在网上看过很多类似的问题。但是没有一种解决方案对我有用。任何帮助将不胜感激。提前致谢。

jsfiddle 链接是:http://jsfiddle.net/msz08tjx/

Answer 1

仅使用 release v3 js 似乎无法解决 firefox 中的问题。 还可以添加以下标记选项...

optimized:false

引用-- Issue 7136: Bug: Multiple marker titles not working in stable (3.17.15) version of API.