Question

我有一个简单的测试网站来显示谷歌地图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>

该页面只显示没有地图的灰色div。我在这个网站上搜索但没有任何作用（调整窗口事件，溢出：可见，宽度：100％......等等）

问题是当我取消注释Google的示例代码时，它可以运行。所以我的脚本一定有问题，请提交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));

有人可以告诉我哪里错了吗？

Answer 1

我知道原因。这是因为我没有给这个领域带来价值＆＃34; zoom＆＃34;在创建地图时。它应该如下所示

        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
        };

谷歌应该为它制作默认值，这真的很愚蠢。

Googlemap在所有浏览器上显示灰色框

1 个答案: