Google地图不显示缩放控件

本文介绍了Google地图不显示缩放控件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我使用的是gmaps.js插件 hpneo.github/gmaps/

I am using gmaps.js plugin hpneo.github/gmaps/

滑动缩放控制和InfoWindow不显示，并在显示时遇到一些问题。链接： bakasura.in/startupsradar/index.html

The Sliding Zoom Control and the InfoWindow don't show up and have some issues when they display. Link: 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: "i.imgur/3YJ8z.png", infoWindow: { content: '<p>HTML Content</p>' } }); });

推荐答案

Bootstrap与地图呈现冲突

Bootstrap was conflicting with the rendering of Maps

添加这些CSS代码就可以实现这个功能

Adding these lines of CSS did the trick

/* Bootstrap Css Map Fix*/ #mainBody #map img { max-width: none; } /* Bootstrap Css Map Fix*/ #mainBody #map label { width: auto; display:inline; }