从Lightbox或类似的infowindows打开URL

时间:2017-01-05 01:12:42

标签: javascript google-maps

我在使用Google地图制作计划假期的项目中取得了进展。

目前的版本是 here

  function initGmap() {
var map;
var clicked = false
    var locations = [
        ['Sydney', -33.8688197,   151.2092955, 1,'https://en.wikipedia.org/wiki/Sydney'],
['Vancouver', 49.2827291,   -123.1207375, 2,'https://en.wikipedia.org/wiki/Vancouver'],
['Vancouver', 49.2827291,   -123.1207375, 3,'https://en.wikipedia.org/wiki/Vancouver'],
['Kamloops', 50.6745220,   -120.3272674, 4,'https://en.wikipedia.org/wiki/Kamloops'],
['Jasper,Canada', 52.8736786,   -118.0813581, 5,'https://en.wikipedia.org/wiki/Jasper,Canada'],
['Banff', 51.1783629,   -115.5707694, 6,'https://en.wikipedia.org/wiki/Banff'],
['Lake Louise,Canada', 51.4253705,   -116.1772552, 7,'https://en.wikipedia.org/wiki/Lake Louise,Canada'],
['Calgary', 51.0486151,   -114.0708459, 8,'https://en.wikipedia.org/wiki/Calgary'],
['Canadian Rockies', 54.1521752,   -120.1585339, 9,'https://en.wikipedia.org/wiki/Canadian Rockies'],
['Niagara Falls', 43.0962143,   -79.0377388, 10,'https://en.wikipedia.org/wiki/Niagara Falls'],
['New York', 40.7127837,   -74.0059413, 11,'https://en.wikipedia.org/wiki/New York'],
['Rockerfeller Building', 40.7587402,   -73.9786736, 12,'https://en.wikipedia.org/wiki/Rockerfeller Building'],
['Statue Of Liberty', 40.6892494,   -74.0445004, 13,'https://en.wikipedia.org/wiki/Statue Of Liberty'],
['Empire State Building', 40.7484405,   -73.9856644, 14,'https://en.wikipedia.org/wiki/Empire State Building'],
['Washington D.C.', 38.9071923,   -77.0368707, 15,'https://en.wikipedia.org/wiki/Washington D.C.'],
['Utah', 39.3209801,   -111.0937311, 16,'https://en.wikipedia.org/wiki/Utah'],
['Arches National Park', 38.7330810,   -109.5925139, 17,'https://en.wikipedia.org/wiki/Arches National Park'],
['Las Vegas', 36.1699412,   -115.1398296, 18,'https://en.wikipedia.org/wiki/Las Vegas'],
['Bryce National Park', 37.5930377,   -112.1870895, 19,'https://en.wikipedia.org/wiki/Bryce National Park'],
['Zion national Park', 37.2982022,   -113.0263005, 20,'https://en.wikipedia.org/wiki/Zion national Park'],
['San Francisco', 37.7749295,   -122.4194155, 21,'https://en.wikipedia.org/wiki/San Francisco'],
['Alcatraz', 37.8269775,   -122.4229555, 22,'https://en.wikipedia.org/wiki/Alcatraz'],
['Yosemite', 37.8651011,   -119.5383294, 23,'https://en.wikipedia.org/wiki/Yosemite'],
['San Francisco', 37.7749295,   -122.4194155, 24,'https://en.wikipedia.org/wiki/San Francisco'],
['Sydney', -33.8688197,   151.2092955, 25,'https://en.wikipedia.org/wiki/Sydney'],

    ];

    var map = new google.maps.Map(document.getElementById('map-canvas'), {
        zoom: 4,
        center: new google.maps.LatLng(-33.8688197,   151.2092955),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
    });

    var infowindow = new google.maps.InfoWindow();

    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]),
            title: locations[i][0],
            map: map
        });

        google.maps.event.addListener(marker, 'click', (function (marker, i) {
            return function () {
clicked = true;
                var html = '';

                // Create a container for the infowindow content
                html += '<div class="infowindow-content">';

                // Add a link
                html += '<a href="' + locations[i][4] + '">Click for local Wiki page</a><br />';

                                html += '<locations[i][4]>' + locations[i][0] + '<br> <br>';

                              html+= '<a href="' + locations[i][5] + '">Bookings</a><br />';
                // Add an image
                html += '<locations[i][5]>' + locations[i][5] + '<br>';

                // Close the container
                html += '</div>';

                infowindow.setContent(html);
                infowindow.open(map, marker);
                setTimeout(function () {infowindow.close(); }, 8000);
            }
        })(marker, i));




           google.maps.event.addListener(marker, 'mouseover', function() { if (!clicked) {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      });

      google.maps.event.addListener(marker, 'mouseout', function() {
       if (!clicked) {
          infowindow.close();
        }
      });    




var lineCoordinates = locations.map(function(val) {
    return new google.maps.LatLng(val[1], val[2]);
  });

  var tripPath = new google.maps.Polyline({
    path: lineCoordinates,
    geodesic: true,
    strokeColor: '#000',
    strokeOpacity: 1.0,
    strokeWeight: 2
  });

  tripPath.setMap(map);

  }       
}
initGmap();
initialize()

问题是..从所选标记中,页面全屏打开..当我取消时,我被带回第一个标记。

我想如果我打开灯箱(或类似的)中的链接,我可以关闭灯箱窗口..? (我是对的吗?)

那么我如何添加Lightbox并打开Lightbox(或类似版本)中的infowindow链接?

所有帮助或建议表示赞赏...... 干杯

0 个答案:

没有答案