Question

我正在尝试在我的代码中使用optimize：false参数将动画gif用作鼠标悬停：

var icon1 = "circle.png";
var icon2 = "circlered.gif";


var markers = [];
var marker, i;

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

google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
  return function(evt) {
    infowindow.setContent(locations[i][0] + "<br>" + marker.getPosition().toUrlValue(6));
    infowindow.open(map, marker);
    marker.setIcon(icon2);
  }
})(marker, i));
markers.push(marker); // save all markers

google.maps.event.addListener(marker, 'mouseout', (function(marker) {
  return function(evt) {
    infowindow.close();
    marker.setIcon(icon1);
  }
})(marker));

当我使用例如：

for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map,
    visible: false,
    icon: icon2, //here I purposely changed it to animated gif first
    optimize: false
    });

我没有问题。但是当我尝试在这里使用相同的东西时：

google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
    return function(evt) {
    infowindow.setContent(locations[i][0] + "<br>" + marker.getPosition().toUrlValue(6));
    infowindow.open(map, marker);
    marker.setIcon(icon2);
optimize:false;// here is the wrong code obviously 
  }
})(marker, i));

我让图像消失而不是动画请建议解决方案

根据@geocoder在此处发布的建议：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
 <style>
html, 
body,

#map-canvas{
    width: 100%; 
    margin: 0px; 
    padding: 0px; 
    height: 880px;
    z-index:2
    }
#maptwo {
    z-index:1
}
    </style>    

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<!-- Include jQuery -->
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

<script>
var map;
var infowindow = new google.maps.InfoWindow();

function initialize() {
var map = new google.maps.Map(
document.getElementById("map-canvas"), {
  center: new google.maps.LatLng(40.222869, 47.602673),
  zoom: 13,
  mapTypeId: google.maps.MapTypeId.TERRAIN
});
var icon1 = "http://maps.google.com/mapfiles/ms/micons/blue.png";
var icon2 = {
url: "http://blogs.technet.com/cfs-file.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-01-01-35/e8nZC.gif",
scaledSize: new google.maps.Size(75, 100)
};



var markers = [];
var marker, i;
var bounds = new google.maps.LatLngBounds();
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
  position: new google.maps.LatLng(locations[i][1], locations[i][2]),
  map: map,
  optimized: false,
  visible: false,
  icon: icon1
});
bounds.extend(marker.getPosition())
google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
  return function(evt) {
    infowindow.setContent(locations[i][0] + "<br>" + marker.getPosition().toUrlValue(6));
    infowindow.open(map, marker);
    marker.setIcon(icon2);
  }
})(marker, i));
markers.push(marker); // save all markers

google.maps.event.addListener(marker, 'mouseout', (function(marker) {
  return function(evt) {
    infowindow.close();
    marker.setIcon(icon1);
  }
})(marker));
/* Change markers on zoom */
google.maps.event.addListener(map, 'zoom_changed', function() {
var zoom = map.getZoom();
// iterate over markers and call setVisible
for (i = 0; i < locations.length; i++) {
    markers[i].setVisible(zoom >= 11);
}
});     

  }
  map.fitBounds(bounds);
  }
google.maps.event.addDomListener(window, "load", initialize);
var locations = [
['Location1', 39.031586, 46.590031, 5],
['Location2', 38.998439, 46.557591, 4],
['Location3', 38.913429, 46.547370, 3],
['Location4', 39.090245, 46.703794, 2],
['Location5', 39.130588, 46.696239, 1]
  ];
//here I create a function that will show/hide layers that are defined by the  latLng  values  
function toggleLayer(firLayer, id) {
  if ($('#' + id).is(':checked')) {
firLayer.setMap(map);
  } else {
firLayer.setMap(null);
  }
}
//this is the end of the function

// Fir AZE is one of the many layers that are drawn
        drawAZE = new google.maps.Polygon({
            path: firAZE,
            strokeColor: '#000000',
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: '#00CCFF',
            fillOpacity: 0.15
        }); 
//end of FirAZE  end of layer
// Add a listener for the drawAZE mouseover/mouseout event.
google.maps.event.addListener(drawAZE ,'mouseover',function(){
this.setOptions({fillColor: "#FF0000"},{fillOpacity:"0.8"});
}); 
google.maps.event.addListener(drawAZE ,'mouseout',function(){
this.setOptions({fillColor: "#00CCFF"},{fillOpacity:"0.5"});
});
//end of drawAZE listener


</script>
</head>
<body>
<div id="map-canvas"></div>
<div id="maptwo"></div>
<input id="fir_azerbaijan" type="checkbox" onClick="toggleLayer(drawAZE,'fir_azerbaijan')" /> AZERBAIJAN
</body>
</html>

你可以在＆＃34; Fir AZE＆＃34;中看到代码。画一层。然后它（绘制的图层）应该在点击时显示，最初在此链接www.visualguide.ca/example提供的示例显示了这一点。当我询问有关动画标记的解决方案时，我认为我有优化问题：false - 因为他们所有的代码行都正常工作。因为我试图实现下面提供的解决方案，它工作！但如果最初不清楚

，我就失去了在click.sorry上显示/隐藏图层的能力

我的初始代码是：

function initialize() {
 var mapOptions = {
 zoom: 8,
 center: new google.maps.LatLng(40.222869, 47.602673),
 mapTypeId: google.maps.MapTypeId.TERRAIN,
 zIndex: 3
  };

// Set map    
 map = new google.maps.Map(document.getElementById('map-canvas'),
  mapOptions);

它被改为

 function initialize() {
 var map = new google.maps.Map(
 document.getElementById("map-canvas"), {
   center: new google.maps.LatLng(40.222869, 47.602673),
   zoom: 13,
   mapTypeId: google.maps.MapTypeId.TERRAIN
 });

var bounds = new google.maps.LatLngBounds();
  for (i = 0; i < locations.length; i++) {
   marker = new google.maps.Marker({
  position: new google.maps.LatLng(locations[i][1], locations[i][2]),
  map: map,
  optimized: false,
  visible: false,
  icon: icon1
});
bounds.extend(marker.getPosition())
//....
}
map.fitBounds(bounds);
}

我已经逐行比较找到了这个，但我发现了。

Answer 1

一种选择是使用{optimized: false}创建标记：

for (i = 0; i < locations.length; i++) {
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map,
    optimized: false,
    icon: icon1
  });
  google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
    return function(evt) {
      infowindow.setContent(locations[i][0] + "<br>" + marker.getPosition().toUrlValue(6));
      infowindow.open(map, marker);
      marker.setIcon(icon2);
    }
  })(marker, i));
  markers.push(marker); // save all markers

  google.maps.event.addListener(marker, 'mouseout', (function(marker) {
    return function(evt) {
      infowindow.close();
      marker.setIcon(icon1);
    }
  })(marker));
}

动画gif的代码段：

var map;
var infowindow = new google.maps.InfoWindow();

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var icon1 = "http://maps.google.com/mapfiles/ms/micons/blue.png";
  var icon2 = {
    url: "http://blogs.technet.com/cfs-file.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-01-01-35/e8nZC.gif",
    scaledSize: new google.maps.Size(75, 100)
  };


  var markers = [];
  var marker, i;
  var bounds = new google.maps.LatLngBounds();
  for (i = 0; i < locations.length; i++) {
    marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i][1], locations[i][2]),
      map: map,
      optimized: false,
      icon: icon1
    });
    bounds.extend(marker.getPosition())
    google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
      return function(evt) {
        infowindow.setContent(locations[i][0] + "<br>" + marker.getPosition().toUrlValue(6));
        infowindow.open(map, marker);
        marker.setIcon(icon2);
      }
    })(marker, i));
    markers.push(marker); // save all markers

    google.maps.event.addListener(marker, 'mouseout', (function(marker) {
      return function(evt) {
        infowindow.close();
        marker.setIcon(icon1);
      }
    })(marker));
  }
  map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, "load", initialize);
var locations = [
  ['palace', 52.231871, 21.005841],
  ['arkadia', 52.257305, 20.984481],
  ['stadium', 52.215147, 21.035074]
];

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>

Answer 2

不知怎的，我已经管理过（在地理编码器和Alex的帮助下 - 谢谢

//announce my variables
var icon1 = "circle.png";
var icon2 = "circlered.gif";


var markers = [];
var marker, i;

for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
  position: new google.maps.LatLng(locations[i][1], locations[i][2]),
  map: map,
  optimized:false, // <-- required for animated gif
  visible: false,
  icon: icon1
});

我还设法让我的图层出现在点击

上

谷歌地图中的数组动画gif

2 个答案: