Question

我正在网站上工作，我希望每个网页上都有一个不同的Google地图，以获取多个网页的列表。但我不确定如何解决这个问题。我在W3Schools上使用了我发现的一些代码（在下面列出。），但它们的代码是单个页面上的一个地图，以及单个页面上的多个地图。我不能重复Javascript的第一个功能，即使我在下面显示两次，因为它不会显示在其他页面上。可能有一种方法可以重写它以使其工作，但我对Javascript有点新鲜。

我已经找到了这个问题，但无法找到与此相关的问题，只能找到如何为每个html文件创建多个地图。

我在main.js文件中使用了这段 Javascript ，而不是在每个单独的页面上使用该代码段。这是我从W3Schools发现的一些代码。我做的唯一改变是复制并粘贴了函数，它包含两次代码 -

function myMap() {
  var mapCanvas = document.getElementById("map1");
  var mapOptions = {
    center: new google.maps.LatLng(51.508742,-0.120850),
    zoom: 5
  };
  var map = new google.maps.Map(mapCanvas, mapOptions);
}

function myMap() {
  var mapCanvas = document.getElementById("map2");
  var mapOptions = {
    center: new google.maps.LatLng(42.859822,-97.15901),
    zoom: 5
  };
  var map = new google.maps.Map(mapCanvas, mapOptions);
}

我在我的第一个HTML页面上使用了这段 HTML -

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

这是我的第二个 -

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

正如他们在网站上找到的那样 - http://www.w3schools.com/graphics/tryit.asp?filename=trymap_basic。

正如标题中提到的，我正在引用Google Maps Javascript API。

这是我调用我正在使用的文件的结构，我将其放在每个HTML表格上。

<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<link href="https://fonts.googleapis.com/css?family=Cardo|Roboto:100,300,500" rel="stylesheet">
<script src="https://maps.googleapis.com/maps/api/js?callback=myMap">  </script>

Answer 1

范围内只能有一个具有给定名称的函数。要将地图加载到单独的页面上，如果<div> id相同，则可以使用包含单个函数的同一文件：

<强> main.js：

function myMap() {
  var mapCanvas = document.getElementById("map");
  var mapOptions = {
    center: new google.maps.LatLng(51.508742,-0.120850),
    zoom: 5
  };
  var map = new google.maps.Map(mapCanvas, mapOptions);
}

将其包含在您网页的<body>中，如下所示：

<div id="map"></div>
<script type="text/javascript" src="scripts/SO_20170108_main.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=myMap"></script>

概念验证/实例

每页1个不同的地图使用Google Maps Javascript API

1 个答案: