本文介绍了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; }更多推荐
Google地图不显示缩放控件
发布评论