我正在构建一个Google地图，其中我绘制了20-40个点。目前，当您将鼠标悬停在一个点上时，它会触发qTip弹出窗口。我写了一个脚本来每隔6秒更改一次“panto”，并且我试图在点平移时触发相应的qTip。
<script type="text/javascript">
var map, marker, latLngToPixel;
var locations = [
["Reforestation Cumberland State Forest", 37.4963918, -78.2448664, "", "www.dof.virginia.gov"],
["Guaranta Settlement, Brazil ", -13.44234, -47.944336, "Brazil", "guaranta-settlement-brazil"],
["Trees For Cameroon", 7.369722, 12.354722, "Cameroon", "trees-for-cameroon"],
["Trees for Colombia", 6.3166667, -76.1333333, "Colombia", "urrao-colombia-trees-for-the-future"],
["Trees Water and People Trees for Food Project", 14.0200366, -89.6451688, "El Salvador", ""],
["Trees For Ethiopia", 8.4, 38.4, "Ethiopia", "trees-for-ethiopia"],
["Trees For Ghana", 7.946527, -1.023194, "Ghana", "trees-for-ghana"],
["Trees for Haiti", 18.7703377, -72.513088, "Haiti", "trees-for-haiti"],
["Trees For India", 11.1271225, 78.6568942, "India", "trees-for-india"],
["Madagascar Mangrove Rehabilitation", -23.6682, 46.13353, "Madagascar", "madagascar-mangrove-rehabilitation"],
["Trees For Mali", 12.39495, -7.937085, "Mali", "trees-for-mali"],
["Las Mercedes Reforestation", 13.4726005, -86.4592091, "Nicaragua", ""],
["Trees For Senegal", 14.10686, -15.55198, "Senegal", "trees-for-senegal"],
["Trees for Tanzania ", -8.588228, 35.29755, "Tanzania", "trees-for-tanzania-"],
["Trees for Uganda", 1.2124107, 33.7804036, "Uganda", "trees-for-uganda"],
["Reforest Kentucky", 38.2009055, -84.8732835, "United States", "reforest-kentucky"],
["Celebrate Arbor Day", 40.0583238, -74.4056612, "United States", ""],
["Longleaf Pine Reforestation Project", 32.1574351, -82.907123, "United States", "longleaf-pine-reforestation-on-georgia-state"],
["Trees for Tributaries", 43.0484029, -75.3785034, "United States", "trees-for-tributaries"],
["Wisconsin State Lands Tree Planting", 43.7844397, -88.7878678, "United States", "wisconsin-state-lands-tree-planting"],
["Flight 93 Memorial Reforestation Project", 40.0178571, -78.9072458, "United States", "Flight-93-Memorial-Reforestation"],
["Michigan State Forest Reforestation", 44.5105121, -85.5145764, "United States", "michigan-state-forest-reforestation"],
["Bladen Lakes State Forest", 35.80728455266026, -79.4805908203125, "United States", "bladen-lakes-state-forest"],
["Green Forests Work Maryland", 39.45316112807393, -77.97875979915261, "United States", "www.greenforestswork.org"],
["Green Forests Work Ohio", 39.010648, -83.469727, "United States", "www.greenforestswork.org"],
["Green Forests Work West Virginia", 39.01918382053526, -80.56054690852761, "United States", "www.greenforestswork.org"],
["Green Forests Work Alabama", 34.08906131584996, -86.83154303580523, "United States", "www.greenforestswork.org"],
["Green Forests Work Tennessee", 35.022799223730146, -86.50195319205523, "United States", "www.greenforestswork.org"],
];
function initialize() {
var styles = [ { featureType: "administrative.locality", stylers: [ { visibility: "simplified" } ] }, { featureType: "road.highway", stylers: [ { visibility: "off" } ] }, { featureType: "water", stylers: [ { visibility: "simplified" } ] }, { featureType: "administrative.locality", stylers: [ { visibility: "off" } ] }, { featureType: "water", stylers: [ { visibility: "on" }, { hue: "#85c6dc" } ] } ];
var CENTER_EARTH = new google.maps.LatLng(38, 0);
elem = document.getElementById('map_canvas');
var mapOptions = {
zoom: 2,
center: CENTER_EARTH
};
function LatLngToPixel(map) { this.setMap(map); }
LatLngToPixel.prototype = new google.maps.OverlayView();
LatLngToPixel.prototype.draw = function() {}
map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
var build = new google.maps.StyledMapType(styles, mapOptions);
var infowindow = new google.maps.InfoWindow();
var marker, i;
var id = 1;
map.mapTypes.set('map', build);
map.setMapTypeId('map');
latLngToPixel = new LatLngToPixel(map);
/* Loop Through To Generate Points, Left 1 For Example... */
generateMarker(id, 37.4963918, -78.2448664, "Reforestation Cumberland ...", "Cumberland, Virginia ", "www.dof.virginia.gov", "61", "0", "61_4f0312528dbf4VA 4.jpg" );
id++;
}
function generateMarker(id, Lat, Lng, ProjectName, Location, PURL, idProject, TreesPlanted, Thumb) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(Lat, Lng),
icon: 'http://staging.&********.com/css/images/pin.png',
map: map,
});
var content = '<img style="float:left;margin-right:10px;" src="../common/perfectimg.php?w=61&h=62&u=/common/assets/'+Thumb+'&x=y.jpg" alt="tooltip1" width="61" height="62" /><div style="float:left;"><strong>' + ProjectName + '</strong><br />' + TreesPlanted + ' Trees Planted So Far... <br />' + Location + "</div>";
google.maps.event.addDomListener(marker, 'mouseover', function(event) {
var pixel = latLngToPixel.getProjection().fromLatLngToContainerPixel(event.latLng);
var pos = [ pixel.x, pixel.y ];
marker.tooltip = $('<div />').qtip({
content: content,
width: 600,
style: {
classes: 'ui-tooltip-blue',
tip: {
width: 12,
height: 12
}
},
position: {
my: 'bottom center',
at: 'left center',
adjust: {
x:-5, y:-32
},
target: pos,
container: $('#map_canvas'),
viewport: $('.map')
},
show: {
ready: true,
event: false,
solo: true
},
hide: {
event: 'mouseleave unfocus'
}
})
.qtip('api');
});
google.maps.event.addListener(marker, 'click', function(event) {
window.location = "?idProject="+idProject;
});
}
$(document).ready(function() {
initialize();
var x = 0;
setInterval(function(){
if(x > locations.length) x = 0;
map.setZoom(5);
map.panTo(new google.maps.LatLng(locations[x][1],locations[x][2]));
x++;
}, 6000);
});
</script>
答案 0 :(得分：0)
我想说在添加标记时将其添加到数组中。然后，当您调用panTo时，也会触发该标记的单击。
创建一个名为arrMarkers的全局变量。然后在generateMarker函数结束时：
arrMarkers.push(marker);
然后在你的setInterval函数中：
map.panTo(new google.maps.LatLng(locations[x][1],locations[x][2]));
google.maps.event.trigger(arrMarkers[x], 'click');
事实上，您甚至可以删除panTo本身，因为触发点击我认为无论如何都会自动平移地图！
PS：数组中最后一项末尾的尾随逗号会导致IE出现问题（虽然这可能不是您正在使用的实际数据）：
["Green Forests Work Tennessee", 35.022799223730146, -86.50195319205523, "United States", "www.greenforestswork.org"],