Googlemap会在所有浏览器上显示灰色框 [英] Googlemap shows grey box on all browsers
本文介绍了Googlemap会在所有浏览器上显示灰色框的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个简单的测试网站来显示Google地图此处：
< html>
< head>
< script src =http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js>< / script>
< script src =http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js>< / script>
< script src =http://maps.googleapis.com/maps/api/js?libraries=places,geometry>< / script>
< script src =js / GoogleMap / GoogleMap_thread_view.js>< / script>
< link href =js / GoogleMap / GoogleMap.css =stylesheet/>
< script type =text / javascript> $（document）.ready（function（）{
$（＃googlemap）。GoogleMap（{addr：105K Ho Thi Ky Phuong 1 Quan 10 Ho Chi Minh，lat：43.37049234，lng：30.3480382}）;
/ * var myLatlng = new google.maps.LatLng（-25.363882,131.044922）;
var mapOptions = {
zoom：4，
center：myLatlng
}
var map = new google.maps.Map（document.getElementById（'googlemap'），mapOptions）;
var marker = new google.maps.Marker（{
position：myLatlng，
map：map，
title：'Hello World！'
}）; * /
}）;< / script>
< / head>
< body style =width：1000px; height：600px;>
< div id =googlemapstyle =width：1000px; height：600px;> abc< / div>
< / body>
< / html>
页面只显示没有地图的灰色div。
我在这个网站上搜索了四周，但没有任何工作（调整窗口事件，溢出：可见，宽度：100％...等等...）
事情是，当我取消注释谷歌的示例代码，它的作品。因此，我的脚本文件必须有问题，例如GoogleMap_thread_view.js
（function（$）{
var map ，place，myMarker;
$ .widget（'4phuong.GoogleMap'，{
options：{
addr：'unknown'，
lat：0，
lng ：0，
zoom：2
}，
_create：function（）{
var $ widget = this;
$ widget.element.children （）.hide（）;
$ widget ._ $ container = $（'< div class =googlemap-container>< div class =map-canvas>< / div> < / div>'）;
$ widget.element.append（$ widget ._ $ container）;
var mapOptions = {
center：new google.maps.LatLng（$ widget .options.lat，$ widget.options.lng），
zoomControlOptions：{
style：google.maps.ZoomControlStyle.SMALL，
position：google.maps.ControlPosition.LEFT_BOTTOM
}，
mapTypeControl：false，
streetViewControl：false
};
map = new google.maps.Map（document.getElementsByClassName（'map-canvas'）[0]，mapOptions）;
myMarker = new google.maps.Marker（{
map：map，
title：$ widget.options.addr，
position：new google.maps。 LatLng（$ widget.options.lat，$ widget.options.lng）
}）;
}，
destroy：function（）{
this ._ $ container.remove（）;
$ .Widget.prototype.destroy.apply（this，arguments）;
this.element.show（）;
}，
control：function（）{
return this ._ $ control;
}
}）;
}（jQuery））;
有人可以告诉我我错了吗？
解决方案
我知道原因。这是因为在创建地图时，我没有对缩放字段赋予价值。它应该如下所示
var mapOptions = {
center：new google.maps.LatLng（$ widget.options .lat，$ widget.options.lng），
zoom：$ widget.options.zoom，
zoomControlOptions：{
style：google.maps.ZoomControlStyle.SMALL，
position ：google.maps.ControlPosition.LEFT_BOTTOM
}，
mapTypeControl：false，
streetViewControl：false
};
这真的很愚蠢，因为Google应该为它设定默认值。
I have a simple test site to show google map here:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?libraries=places,geometry"></script>
<script src="js/GoogleMap/GoogleMap_thread_view.js"></script>
<link href="js/GoogleMap/GoogleMap.css" rel="stylesheet" />
<script type="text/javascript">$(document).ready(function () {
$("#googlemap").GoogleMap({addr: "105K Ho Thi Ky Phuong 1 Quan 10 Ho Chi Minh", lat: 43.37049234, lng: 30.3480382});
/*var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById('googlemap'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!'
});*/
});</script>
</head>
<body style="width: 1000px; height: 600px;">
<div id="googlemap" style="width: 1000px; height: 600px; ">abc</div>
</body>
</html>
The page just shows grey div without map. I searched around on this site but nothing works (resize window event, overflow: visible, width: 100% ... etc ...)
The thing is when I uncomment the Google's sample code, it works. So there must be something wrong with my script, file GoogleMap_thread_view.js
(function ($) {
var map, place, myMarker;
$.widget('4phuong.GoogleMap', {
options: {
addr: 'unknown',
lat: 0,
lng: 0,
zoom: 2
},
_create: function () {
var $widget = this;
$widget.element.children().hide();
$widget._$container = $('<div class="googlemap-container"><div class="map-canvas"></div></div>');
$widget.element.append($widget._$container);
var mapOptions = {
center: new google.maps.LatLng($widget.options.lat, $widget.options.lng),
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
position: google.maps.ControlPosition.LEFT_BOTTOM
},
mapTypeControl: false,
streetViewControl: false
};
map = new google.maps.Map(document.getElementsByClassName('map-canvas')[0], mapOptions);
myMarker = new google.maps.Marker({
map: map,
title: $widget.options.addr,
position: new google.maps.LatLng($widget.options.lat, $widget.options.lng)
});
},
destroy: function () {
this._$container.remove();
$.Widget.prototype.destroy.apply(this, arguments);
this.element.show();
},
control: function () {
return this._$control;
}
});
}(jQuery));
Could someone please tell me where I am wrong?
解决方案
I know the reason. It's because I didn't give value to the field "zoom" when creating map. It should look like below
var mapOptions = {
center: new google.maps.LatLng($widget.options.lat, $widget.options.lng),
zoom: $widget.options.zoom,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
position: google.maps.ControlPosition.LEFT_BOTTOM
},
mapTypeControl: false,
streetViewControl: false
};
It's really stupid as Google should make default value for it.
这篇关于Googlemap会在所有浏览器上显示灰色框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
