0
나는 20-40 점이있는 Google지도를 작성하고 있습니다. 현재 한 지점 위로 마우스를 가져 가면 q 팁 팝업이 트리거됩니다. 필자는 "panto"를 6 초마다 변경하는 스크립트를 작성했으며, 포인트가 팬되면 해당 qTip을 트리거하려고합니다.GoogleMaps3 트리거 호버 이벤트 PanTo
<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>