Событие при наведении на GoogleMaps3 при PanTo

Question

Я строю карту Google, где у меня есть 20-40 точек.В настоящее время, когда вы наводите курсор мыши на точку, она вызывает всплывающее окно qTip.Я написал скрипт для смены «panto» каждые 6 секунд, и я пытаюсь вызвать соответствующий 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>

Answer 1

Я бы сказал, добавьте ваши маркеры в массив по мере их добавления.Затем, когда вы вызываете свой 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"],