響應式標簽中的 Google 地圖
[英]Google Maps in responsive tabs
問題描述
我正在嘗試在 3 個響應式選項卡中添加 3 個 Google 地圖，但只有第一個有效：
我嘗試了許多不同的解決方案，包括給寬度一個數字來定義地圖大小，而不是自動，但結果相同。
據我了解，我需要告訴腳本在更改選項卡時調整大小，如下所示：
google.maps.event.trigger(map, 'resize');
但我不知道怎么做。 任何人都可以請幫忙。
如果我手動調整窗口大小，地圖將顯示
當我有語法錯誤時，Dw 中的另一件事是，該頁面實際上可以在實時預覽中工作，但如果我保存則不行。 只是覺得我應該提一下。
function initialize() { var myLatlngOH = new google.maps.LatLng(39.630159,-84.175937); var myLatlngCA = new google.maps.LatLng(33.677705,-117.852974); var myLatlngUK = new google.maps.LatLng(51.520614,-0.121825); var mapOptionsOH = { zoom: 5, center: myLatlngOH, mapTypeId: google.maps.MapTypeId.ROADMAP, mapTypeControl: 1 } var mapOptionsCA = { zoom: 5, center: myLatlngCA, mapTypeId: google.maps.MapTypeId.ROADMAP, mapTypeControl: 1 } var mapOptionsUK = { zoom: 5, center: myLatlngUK, mapTypeId: google.maps.MapTypeId.ROADMAP, mapTypeControl: 1 } var mapOH = new google.maps.Map(document.getElementById('map-OH'), mapOptionsOH); var mapCA = new google.maps.Map(document.getElementById('map-CA'), mapOptionsCA); var mapUK = new google.maps.Map(document.getElementById('map-UK'), mapOptionsUK); var markerOH = new google.maps.Marker({ position: myLatlngOH, map: mapOH, title: 'Company Office - Ohio' }); var markerCA = new google.maps.Marker({ position: myLatlngCA, map: mapCA, title: 'Company Office - California' }); var markerUK = new google.maps.Marker({ position: myLatlngUK, map: mapUK, title: 'Company Office - London' }); } google.maps.event.addDomListener(window, 'load', initialize); (function() { 'use strict'; /** * tabs * * @description The Tabs component. * @param {Object} options The options hash */ var tabs = function(options) { var el = document.querySelector(options.el); var tabNavigationLinks = el.querySelectorAll(options.tabNavigationLinks); var tabContentContainers = el.querySelectorAll(options.tabContentContainers); var activeIndex = 0; var initCalled = false; /** * init * * @description Initializes the component by removing the no-js class from * the component, and attaching event listeners to each of the nav items. * Returns nothing. */ var init = function() { if (!initCalled) { initCalled = true; el.classList.remove('no-js'); for (var i = 0; i < tabNavigationLinks.length; i++) { var link = tabNavigationLinks[i]; handleClick(link, i); } } }; /** * handleClick * * @description Handles click event listeners on each of the links in the * tab navigation. Returns nothing. * @param {HTMLElement} link The link to listen for events on * @param {Number} index The index of that link */ var handleClick = function(link, index) { link.addEventListener('click', function(e) { e.preventDefault(); goToTab(index); }); }; /** * goToTab * * @description Goes to a specific tab based on index. Returns nothing. * @param {Number} index The index of the tab to go to */ var goToTab = function(index) { if (index !== activeIndex && index >= 0 && index <= tabNavigationLinks.length) { tabNavigationLinks[activeIndex].classList.remove('is-active'); tabNavigationLinks[index].classList.add('is-active'); tabContentContainers[activeIndex].classList.remove('is-active'); tabContentContainers[index].classList.add('is-active'); activeIndex = index; } }; /** * Returns init and goToTab */ return { init: init, goToTab: goToTab }; }; /** * Attach to global namespace */ window.tabs = tabs; })(); var myTabs = tabs({ el: '#tabs', tabNavigationLinks: '.c-tabs-nav__link', tabContentContainers: '.c-tab' }); myTabs.init();
#map-OH, #map-CA, #map-UK { width: auto; height: 600PX; } .c-tabs-nav { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; list-style: none; margin: 0; padding: 0; } .c-tabs-nav__link { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; margin-right: 4px; /* padding: 12px; */ color: #fff; background-color: #b3b3b3; text-align: center; -webkit-transition: color 0.3s; transition: color 0.3s; } .c-tab { display: none; } .c-tab.is-active { display: block; }
<!DOCTYPE html> <html> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <link href="style.css" rel="stylesheet" type="text/css"> <meta content="width=device-width, initial-scale=1.0, maximum-scale=3.0" name="viewport"> <script src='https://maps.googleapis.com/maps/api/js?v=3.exp&key=AIzaSyC-5CY9mOCeg5Y3IhPqi_Yd0-DZtWrJl-E'></script> <title></title> </head> <body> <div class="c-tabs no-js" id="tabs"> <div class="c-tabs-nav"> <a class="c-tabs-nav__link is-active" href="#"> <p>Mappa</p></a> <a class="c-tabs-nav__link" href="#"> <p>Navi</p></a> <a class="c-tabs-nav__link" href="#"> <p>Streat</p></a> </div> <div class="c-tab is-active"> <div class="c-tab__content"> <div class="masked location-image pull-right" id="map-OH"></div> </div> </div> <div class="c-tab"> <div class="c-tab__content"> <div class="masked location-image pull-right" id="map-CA"></div> </div> </div> <div class="c-tab"> <div class="c-tab__content"> <div class="masked location-image pull-right" id="map-UK"></div> </div> </div> </div> <script src="tabs.js"> </script> </body> </html>
1 個解決方案
解決方案1
0 2016-10-04 14:57:45
沒有解決它，但我使用 iframe 而不是 javascript，它在所有 3 個選項卡中都有效
帶有rwdImageMaps的圖像映射+響應式標簽
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.