【问题标题】:Google Maps Navigation buttons bug [duplicate]谷歌地图导航按钮错误[重复]
【发布时间】:2014-05-03 09:40:12
【问题描述】:

我正在尝试修复在我的网站中嵌入 Google 地图时遇到的这个随机错误。一切正常,除了导航按钮全部不合适/损坏的部分。

下面是解释我在说什么的屏幕截图(以红色突出显示)

正确的应该是这样的:

如果有人以前遇到过同样的问题,我不知道如何解决这个问题,我将不胜感激。

代码如下:

function initialize() {
                var latlng = new google.maps.LatLng(57.0442, 9.9116);
                var mapOptions = {
                    zoom: 15,
                    center: latlng,
                    mapTypeControl: true,
                    mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR},
                    navigationControl: true,
                    navigationControlOptions: {style: google.maps.NavigationControlStyle.LARGE},
                    mapTypeId: google.maps.MapTypeId.ROADMAP};
 
    var map = new google.maps.Map(document.getElementById("location-canvas"), mapOptions);

    var contentString = '<div id="content">'+
                    '<div id="siteNotice">'+
                    '</div>'+
                    '<h1 id="firstHeading" class="firstHeading">Høgenhaug</h1>'+
                    '<div id="bodyContent">'+
                    '<p id="maps">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>'+
                    '</div>'+
                    '</div>';

    var infowindow = new google.maps.InfoWindow({
                    content: contentString
                });


                var companyImage = new google.maps.MarkerImage('img/maps/logo.png',
                    new google.maps.Size(100,50),
                    new google.maps.Point(0,0),
                    new google.maps.Point(50,50)
                );

                var companyShadow = new google.maps.MarkerImage('img/maps/logo_shadow.png',
                    new google.maps.Size(130,50),
                    new google.maps.Point(0,0),
                    new google.maps.Point(65, 50));

                var companyPos = new google.maps.LatLng(57.0442, 9.9116);

                var companyMarker = new google.maps.Marker({
                    position: companyPos,
                    map: map,
                    icon: companyImage,
                    shadow: companyShadow,
                    title:"Høgenhaug",
                    zIndex: 3});

                        
google.maps.event.addDomListener(window, 'resize', initialize);
google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.addListener(companyMarker, 'click', function() {
                    infowindow.open(map,companyMarker);
                });

}

谢谢

【问题讨论】:

  • 你正在使用&lt;img&gt;的样式,例如引导程序。

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


【解决方案1】:

我曾经在我的地图上遇到过这个问题。尝试将其添加到您的 CSS:

#location-canvas img {
  max-width: none;
}

【讨论】:

  • 哇,成功了!是否是某种覆盖声明来覆盖地图img 元素。我什至没有注意到这是一张图片。
  • 是的,如果你看看我发布的那个副本中的 cmets,你就会知道发生了什么。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2019-03-04
  • 1970-01-01
  • 2012-07-24
相关资源
最近更新 更多