删除infowindows上的滚动条而不指定固定高度?

时间:2013-09-09 23:03:22

标签: javascript google-maps-api-3 scrollbar infowindow

自从新的“视觉刷新”以来,还有其他人在infowindows上看到滚动条吗?我现在有了水平和垂直滚动条,仅在初始页面加载时。看起来infowindow没有调整到我的内容的高度,因此生成一个垂直滚动条。垂直滚动条减小了最大宽度,因此也会生成水平滚动条。

这只发生在初始页面加载上,在自动打开的infowindow上。用户手动点击的任何infowindows都没有此问题。

我知道我可以通过为我的内容div指定一个固定的高度和宽度来删除滚动条,但我宁愿没有固定的高度。毕竟,如果用户点击它们,infowindows就会完美显示。只有自动打开显示不正确。

任何想法如何解决这个问题?

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
  var centerLat = 27.946222681465837;
  var centerLon = -82.45767116546631;
  var zoomLevel = 14;
  var poiName = 'Tampa Convention Center';
  var poiLat = 27.94194340459138;
  var poiLon = -82.45656609535217;
  var properties = [
['Embassy Suites Tampa - Downtown Convention Center', 27.9422467033296, -82.4550640583038, '513 South Florida Avenue, Tampa, FL 33602 US ', 'http://reservations.tampaconventioncenterhotels.com/hotel/10027374-11344727O.html', 'The new Embassy Suites Tampa - Downtown Convention Center is located in the heart of the downtown Tampa business and financial center and connected to', 3],
['Sheraton Tampa Riverwalk Hotel', 27.9462700700723, -82.4593234062194, '200 North Ashley Street, Tampa, FL 33602 US ', 'http://reservations.tampaconventioncenterhotels.com/hotel/10027374-10231645O.html', 'Live it up and spend a relaxing day along the riverfront or lounging by the pool at this Sheraton Tampa Riverwalk', 4],
['Hyatt Regency Tampa', 27.9462226814658, -82.4576711654663, '211 North Tampa Street, Tampa, FL 33602 US ', 'http://reservations.tampaconventioncenterhotels.com/hotel/10027374-10084987O.html', 'Immerse yourself in the endless activity that surrounds Hyatt Regency Tampa, ideally located in the heart of the city', 3],
['Westin Tampa Harbour Island', 27.9379246159165, -82.4548253417015, '725 South Harbour Island Boulevard, Tampa, FL 33602 US ', 'http://reservations.tampaconventioncenterhotels.com/hotel/10027374-10000868O.html', 'Escape to this resort-like atmosphere at the Westin Tampa Harbour Island situated on a unique island in downtown Tampa', 4],
['Marriott Execustay the Loft At Channelside', 27.9498075708323, -82.4464809894561, '217 12th Street, Tampa, FL 33602 US ', 'http://reservations.tampaconventioncenterhotels.com/hotel/10027374-11406326O.html', 'Hotel amenities include non-smoking rooms, room service, high-speed internet, kitchenette, interior corridors. Pets are allowed...', 0],
['Courtyard by Marriott Tampa Downtown', 27.9511012293795, -82.4608764052391, '102 East Cass Street, Tampa, FL 33602 US ', 'http://www.tkqlhce.com/click-4060330-10406976?url=http%3a%2f%2fwww.marriott.com%2freservations%2fsetAMCookie.mi%3fAFF%3dMarriott_CustomLink%26AFFNAME%3d%25zp%26mid%3d%2fhotels%2ftravel%2ftpadt-courtyard-tampa-downtown%2f', 'Close to area attractions and three miles from the Airport, the hotel?s cozy guest rooms offer many comforts of home', 3],
['Residence Inn by Marriott Tampa Downtown', 27.9514897977845, -82.4610587954521, '101 East Tyler Street, Tampa, FL 33602 US ', 'http://www.tkqlhce.com/click-4060330-10406976?url=http%3a%2f%2fwww.marriott.com%2freservations%2fsetAMCookie.mi%3fAFF%3dMarriott_CustomLink%26AFFNAME%3d%25zp%26mid%3d%2fhotels%2ftravel%2ftpatd-residence-inn-tampa-downtown%2f', 'Enjoy spacious suites with a full kitchen and separate area for sleeping, working, and relaxing at this Residence Inn', 3],
['Howard Johnson Plaza - Tampa Downtown Riverfront', 27.9532549232401, -82.4637946486473, '111 West Fortune Street, Tampa, FL 33602 US ', 'http://reservations.tampaconventioncenterhotels.com/hotel/10027374-11247829O.html', 'The Howard Johnson Plaza Hotel is opposite the Tampa Bay Performing Arts Center, 10 blocks from the Convention Center and Florida Aquarium, and approximately', 3],
['Hampton Inn and Suites Tampa Ybor City Downtown', 27.9597844519444, -82.4449869990348, '1301 East 7th Avenue, Tampa, FL 33605 US ', 'http://reservations.tampaconventioncenterhotels.com/hotel/10027374-11320830O.html', 'Enjoy the history and ambiance of days gone by while having all of the comforts and conveniences of today', 3],
['Hyde Park Hotel', 27.9353772520539, -82.4814328551292, '2105 West Bristol Avenue, Tampa, FL 33606 US ', 'http://reservations.tampaconventioncenterhotels.com/hotel/10027374-11381170O.html', 'Nestled in the heart of Historic Old Hyde Park and just a short stroll from jazz concerts, fine dining, and shopping', 2],
['Hilton Garden Inn Tampa Ybor Historic District', 27.961722385545, -82.4398076534271, '1700 East 9th Avenue, Tampa, FL 33605 US ', 'http://reservations.tampaconventioncenterhotels.com/hotel/10027374-10226978O.html', 'The Hilton Garden Inn Ybor Historic District hotel in Tampa is located one block from Centro Ybor and a trolley car ride away from Channelside', 3],
['Best Western Tampa', 27.9360099517541, -82.5056505203247, '734 South Dale Mabry, Tampa, FL 33609 US ', 'http://reservations.tampaconventioncenterhotels.com/hotel/10027374-11240897O.html', 'Guests staying at this Tampa hotel will be minutes from Tampa and St. Petersburg area attractions, and corporate offices', 2],
['Quality Inn Airport', 27.9333772331311, -82.5052320957183, '1020 South Dale Mabry, Tampa, FL 33629 US ', 'http://reservations.tampaconventioncenterhotels.com/hotel/10027374-10200737O.html', 'This hotel is centrally located in one of the upscale South Tampa areas with spacious guest rooms and many amenities', 2],
['Courtyard by Marriott Tampa Westshore', 27.9525915237689, -82.5070023536682, '3805 West Cypress, Tampa, FL 33607 US ', 'http://www.tkqlhce.com/click-4060330-10406976?url=http%3a%2f%2fwww.marriott.com%2freservations%2fsetAMCookie.mi%3fAFF%3dMarriott_CustomLink%26AFFNAME%3d%25zp%26mid%3d%2fhotels%2ftravel%2ftpawt-courtyard-tampa-westshore-airport%2f', 'The Courtyard is approximately four miles from downtown and Tampa International Airport', 3],
['Grand Hyatt Tampa Bay', 27.9664272971451, -82.5499257445335, '2900 Bayport Drive, Tampa, FL 33607 US ', 'http://reservations.tampaconventioncenterhotels.com/hotel/10027374-10204605O.html', 'Let your spirit soar at this resort-like hotel set along a wildlife preserve and offering a unique retreat for everyone', 4],
['Renaissance Tampa International Plaza Hotel', 27.966394131316, -82.5198554992675, '4200 Jim Walter Boulevard, Tampa, FL 33607 US ', 'http://www.tkqlhce.com/click-4060330-10406976?url=http%3a%2f%2fwww.marriott.com%2freservations%2fsetAMCookie.mi%3fAFF%3dMarriott_CustomLink%26AFFNAME%3d%25zp%26mid%3d%2fhotels%2ftravel%2ftpaim-renaissance-tampa-international-plaza-hotel%2f', 'Featuring a lush, open-air courtyard, this Renaissance makes you feel like you\'re a world away in a Meditteranean villa', 4],
['Tampa Marriott Waterside', 27.940865265464, -82.4538624286651, '700 South Florida Avenue, Tampa, FL 33602 US ', 'http://www.tkqlhce.com/click-4060330-10406976?url=http%3a%2f%2fwww.marriott.com%2freservations%2fsetAMCookie.mi%3fAFF%3dMarriott_CustomLink%26AFFNAME%3d%25zp%26mid%3d%2fhotels%2ftravel%2ftpamc-tampa-marriott-waterside-hotel-and-marina%2f', 'The pool and pool deck will be closed for enhancements from August 30, 2010 through October 5, 2010. Alternate arrangements have been made just steps away', 4]];
  var infowindow = new google.maps.InfoWindow();
function makeInfoWindow(marker, content, theMap){google.maps.event.addListener(marker, 'click', function () {infowindow.setContent(content); infowindow.open(theMap, marker);});}
function setMarkers(map, locations) {var image = new google.maps.MarkerImage('images/bluebed.png', new google.maps.Size(31, 31), new google.maps.Point(0,0), new google.maps.Point(15, 30)); var shadow = new google.maps.MarkerImage('images/shadow.png', new google.maps.Size(47, 31), new google.maps.Point(0,0), new google.maps.Point(15, 30)); for (var i = 0; i < locations.length; i++) {var hotel = locations[i]; var contentString = '<div style="width:260px;"><strong>' + hotel[0] + '</strong><br />' + hotel[3] + '<br /><a href="' + hotel[4] + '"><strong>Rates and Reservations</strong></a><br /><img src="images/star' + hotel[6] + '.jpg" width="77" height="15" alt="rating"><p class="infowindows"><a href="' + hotel[4] + '">Features</a> | <a href="' + hotel[4] + '">Photos</a> (if available)</p><p>' + hotel[5] + '...<a href="' + hotel[4] + '">more</a></p></div>'; var myLatLng = new google.maps.LatLng(hotel[1], hotel[2]); var marker = new google.maps.Marker({position: myLatLng, map: map, shadow: shadow, icon: image, title: hotel[0]}); makeInfoWindow(marker, contentString, map);} google.maps.event.trigger(marker, 'click');}
function initialize() {var myOptions = {zoom: zoomLevel, center: new google.maps.LatLng(centerLat, centerLon), scaleControl: true, scrollwheel: false, mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}, mapTypeId: google.maps.MapTypeId.ROADMAP}; var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); var pinImage = new google.maps.MarkerImage('images/bed1.png', new google.maps.Size(37, 38), new google.maps.Point(0,0), new google.maps.Point(18, 38)); var pinShadow = new google.maps.MarkerImage('images/shadow1.png', new google.maps.Size(60, 38), new google.maps.Point(0,0), new google.maps.Point(18, 38)); var marker = new google.maps.Marker({position: new google.maps.LatLng(poiLat, poiLon), map: map, shadow: pinShadow, icon: pinImage}); poiName = '<strong>' + poiName + '</strong>'; makeInfoWindow(marker, poiName, map); google.maps.event.addListener(map, 'click', function() {infowindow.close();}); setMarkers(map, properties);}
</script>

1 个答案:

答案 0 :(得分:1)

我遇到了类似的问题,但是覆盖字体并没有解决它。在显示InfoWindow之前等待地图完全加载。

不幸的是,API似乎没有在加载地图时触发的事件。有一个“tilesloaded”可以完成大致相同的事情,除了每次平移地图或更改缩放时它也会触发。这是我的解决方法:

var mapLoaded = false;
google.maps.event.addDomListener(map, 'tilesloaded', function() {
  if (!mapLoaded) {
    // open InfoWindow here
  }
  mapLoaded = true;
});