Question

很抱歉打扰你这么简单，但我真的看不出有什么不对。我正在一个网站上工作，我有HTML5和CSS3知识，但没有太多的jQuery / javascript。我想在我的投资组合中放入一个gmap窗口，所以我尝试使用这个：http://hpneo.github.io/gmaps/examples/basic.html。

但我在网页上的所有内容都是一张白色而绝望空白的广场，我的地图应该是。我通过在地图div中写下背景颜色：红色来检查它是否“显示”，并且它显示为红色。

我在标题中链接了这些文件：

<script src="jQuery/gmaps.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="http://code.jquery.com/jquery.min.js"></script> 
<script type="text/javascript" src="jQuery/script.js"></script>

我的地图在那里：

<section>
   <h1> Où nous trouver ? </h1>
        <p> [Page en construction] </p> 
        <div id="basicmap"></div>
    </section>

我的script.js：

$(document).ready(function(){
 
    $(".diaporama").diaporama({
        animationSpeed: "slow",
        delay:2
    });
});
	
$(document).ready(function(){
	var map = new GMaps({
				div: 'basicmap',
				lat: 47.441396,
				lng: -2.196303,
				width: '500px',
				height: '500px',
				zoom: 12,
				zoomControl : true,
				zoomControlOpt: {
					style : 'SMALL',
					position: 'TOP_LEFT'
				},
				panControl : false,
				});
			map.addMarker({
				lat: 47.441396,
				lng: -2.196303,
				title: 'Résidence Les Ajoncs'
			});
 
});

$(function() {

    $("#submit").hide();

    $("#page-changer select").change(function() {
        window.location = $("#page-changer select option:selected").val();
    })

});

最后我的CSS：

#basicmap
{
    display: block;
    width: 500px;
    height: 500px;
    margin: 0 auto;
    -moz-box-shadow: 0px 5px 20px #ccc;
    -webkit-box-shadow: 0px 5px 20px #CCC;
    box-shadow: 0px 5px 20px #CCC;
}

（对不起，我觉得我在这篇文章中对代码插入方法搞砸了哈哈。）

我可能会感到厌倦或者是我不了解的事情（因为我没有很多网络编程知识而且我有点匆忙），idk，但我已经没有想法了解决这个问题。

SOOOO。非常感谢，如果你能救我\ _ /

Answer 1

在我看来，你不包括gmaps.js库。下面的代码片段适用于我（基于您的代码，但包含gmaps.js库）。

$(document).ready(function() {
  var map = new GMaps({
    div: '#basicmap',
    lat: 47.441396,
    lng: -2.196303,
    width: '500px',
    height: '500px',
    zoom: 12,
    zoomControl: true,
    zoomControlOpt: {
      style: 'SMALL',
      position: 'TOP_LEFT'
    },
    panControl: false,
  });
  map.addMarker({
    lat: 47.441396,
    lng: -2.196303,
    title: 'Résidence Les Ajoncs'
  });

});

$(function() {

  $("#submit").hide();

  $("#page-changer select").change(function() {
    window.location = $("#page-changer select option:selected").val();
  })

});

#basicmap {
  display: block;
  width: 500px;
  height: 500px;
  margin: 0 auto;
  -moz-box-shadow: 0px 5px 20px #ccc;
  -webkit-box-shadow: 0px 5px 20px #CCC;
  box-shadow: 0px 5px 20px #CCC;
}

<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/hpneo/gmaps/master/gmaps.js"></script>
<section>
  <h1> Où nous trouver ? </h1>
  <p>[Page en construction]</p>
  <div id="basicmap"></div>
</section>

无法通过gmaps.js显示地图

1 个答案: