谷歌地图不显示缩放控件

Posted 2023-02-23

【中文标题】谷歌地图不显示缩放控件

【英文标题】：Google Maps Doesn't Show Zoom Controls

【发布时间】：2012-06-25 12:28:38

【问题描述】：

我正在使用 gmaps.js 插件http://hpneo.github.com/gmaps/

滑动缩放控件和信息窗口不显示，并且在显示时有一些问题。链接：http://bakasura.in/startupsradar/index.html

// javascript Document
$(document).ready(function () 
    var map = new GMaps(
        div: '#map',
        lat: 13.00487,
        lng: 77.576729,
        zoom: 13,
    );

    GMaps.geolocate(
        success: function (position) 
            map.setCenter(position.coords.latitude, position.coords.longitude);
        ,
        error: function (error) 
            alert('Geolocation failed: ' + error.message);
        ,
        not_supported: function () 
            alert("Your browser does not support geolocation");
        ,
        always: function () 
            //alert("Done!");
        
    );

    map.addControl(
        position: 'top_right',
        text: 'Geolocate',
        style: 
            margin: '5px',
            padding: '1px 6px',
            border: 'solid 1px #717B87',
            background: '#fff'
        ,
        events: 
            click: function () 
                GMaps.geolocate(
                    success: function (position) 
                        map.setCenter(position.coords.latitude, position.coords.longitude);
                    ,
                    error: function (error) 
                        alert('Geolocation failed: ' + error.message);
                    ,
                    not_supported: function () 
                        alert("Your browser does not support geolocation");
                    
                );
            
        
    );

    map.addMarker(
        lat: 13.00487,
        lng: 77.576729,
        title: 'Lima',
        icon: "http://i.imgur.com/3YJ8z.png",
        infoWindow: 
          content: '<p>HTML Content</p>'
        
    );

);

【问题讨论】：

也许您自己的某些 CSS/JavaScript 会干扰 Google 地图的 CSS/JavaScript？

@UweKeim 是的，这是最好的选择。我想看看是什么。

@UweKeim 删除 Bootstrap CSS 文件可以正确呈现地图 :( 这太疯狂了

【参考方案1】：

Bootstrap 与地图的呈现冲突

添加这些 CSS 行就可以了

/* Bootstrap Css Map Fix*/
#mainBody #map img  
  max-width: none;

/* Bootstrap Css Map Fix*/
#mainBody #map label  
  width: auto; display:inline; 
 

【参考方案2】：

我以前有过这个，是我自己的一些 CSS 覆盖了地图中的一些值。我建议检查应用于 img 标签的所有样式。尤其是全局设置为图像的宽度值。