javascript - jQuery gmap 未显示在网站上

Question

我下载了一个已集成 gmap 的模板。我所要做的就是调整标记，使其指向正确的位置。

我正在创建一个新网站，在联系页面上，我想添加与模板上相同的 gmap。

我使用了相同的代码，复制了相同的文件并将它们放入各自的目录中，但我无法让 map 显示在我的页面上。

在 HTML 文档的 HEAD 中，我包含了以下代码:

 <script src="https://maps.googleapis.com/maps/api/js"></script>

在正文中，我创建了一个如下所示的 SECTION 标记:

 <section id="map-section">
      <div id="map"></div>
 </section>

就在结束 BODY 标记上方，我有以下 Javascript 片段:

<script src="js/jquery-1.11.0.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/jquery.gmap.js"></script>
<script type="text/javascript">
  jQuery(document).ready(function() {
    jQuery('#map').gMap(
      {
        latitude: 50.000000,
        longitude: 50.000000,
        html: "My Location",
        popup: true,
        panControl: true,
        zoomControl: true,
        zoomControlOptions:
        {
          style: google.maps.ZoomControlStyle.SMALL
        },
        mapTypeControl: true,
        scaleControl: true,
        streetViewControl: false,
        overviewMapControl: true,
        scrollwheel: true,
        icon:
        {
          image: "http://www.google.com/mapfiles/marker.png",
          shadow: "http://www.google.com/mapfiles/shadow50.png",
          iconsize: [20, 34],
          shadowsize: [37, 34],
          iconanchor: [9, 34],
          shadowanchor: [19, 34]
        },
        zoom:15,
        markers: [{
          latitude: 50.000000,
          longitude: 50.000000
        }]
      });
    });
 </script>

此外，在我的 CSS 中，我的 map 部分如下所示:

#map-section {
  bottom: 0px;
  padding: 0px;
  height: 250px;
  width: 100%;
  z-index: 0;
  border: 1px solid red;
}
#map{
  display: block;
  height: 250px;
  width: 100%;
  min-width: 100%;
  max-width:1350px;
  margin-left:auto;
  margin-right:auto;
}

如果您在 CSS 中注意到，在 #map-section 中，我添加了一个确实显示在屏幕上的红色边框。它只是不显示 map 。

有人能看到我缺少什么吗？

请帮忙。

Answer 1

将此处提到的所有 js 文件包含在 script 标记中。 maps.google.com/maps/api/js?sensor=false, jquery.ui.map.js， jquery.ui.map.extensions.js, jquery.ui.map.overlays.js, jquery.ui.map.services.js

<div id="map_canvas" style="width:100%; height:500px;"></div>

var mapa = $('#map_canvas').gmap({'center': '-18.646245,35.815918'});
        $('#map_canvas').gmap('option', 'zoom', 7);

        //create the layer (all countries except Mozambique)
        var world_geometry;
        $('#map_canvas').gmap().bind('init', function(event, map) {
            world_geometry = new google.maps.FusionTablesLayer({
                query: {
                    select: 'geometry',
                    from: '1N2LBk4JHwWpOY4d9fobIn27lfnZ5MDy-NoqqRpk',
                    where: "ISO_2DIGIT NOT EQUAL TO 'MZ'"
                },
                styles: [{
                        polygonOptions: {
                            fillColor: "#333333",
                            fillOpacity: 0.3
                        }
                    }],
                map: map,
                suppressInfoWindows: true
            });

        });

            $('#map_canvas').gmap().bind('init', function(event, map) {
                $(map).click(function(event) {
                    $('#map_canvas').gmap('clear', 'markers');
                    $('#map_canvas').gmap('addMarker', {
                        'position': event.latLng,
                        'draggable': true,
                        'bounds': false
                    }, function(map, marker) {
                    }).dragend(function(event) {
                        google.maps.geometry.poly.containsLocation(event.latLng,                       world_geometry);
                    }).click(function() {
                    })
                });
            });

有关现场演示，请检查此 jsfidlle“http://jsfiddle.net/Lq2p5/”