我正在研究一个codeigniter项目,该项目显示了在谷歌地图中特定时间持续时间内带有标记的访问路径。地图,标记,工具提示,折线的一切工作在chrome。
但是在firefox中,当鼠标悬停时,只有一个工具提示显示在标记上。其他工具提示不显示。然后,如果我单击在地图和再次悬停在任何标记上的工具提示显示,但在其他不。这对每个标记都是一样的。问题是只在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/
仅使用v3 js似乎无法解决firefox中的问题。另外添加以下标记选项就可以了…
optimized:false
reference——Issue 7136: Bug:多个标记标题在稳定(3.17.15)版本的API中不工作。
这是"实验版"的问题。不要在生产中使用实验版,它可能会意外崩溃。
在API的包含中将v=3.exp
更改为v=3
:
<script src='https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false'> </script>
:
<script src='https://maps.googleapis.com/maps/api/js?v=3&sensor=false'> </script>
自Firefox 39以来,不仅有标题标签不显示onmouover的问题,而且mouseover addListener事件也没有触发。
为标记属性添加" optimized:false"属性也解决了mouseover addListener事件的问题。