谷歌地图。具有内容的多个标记的多个地图

Question

我有这段代码可以在一个页面中调用多个地图，它使用数组调用所有内容，以使代码尽可能短。

来自以下问题：Multiple googleMaps in one page with non sequential ID's

var coords = [
    {lat: 53.647143, lng: -2.317803, zoom: 10},
    {lat: 53.259065, lng: -4.417487, zoom: 7}
];
var markers = [];
var maps = [];

function initMap() {
    for(var i = 0, length = coords.length; i < length; i++)
    {
        var point = coords[i];
        var latlng = new google.maps.LatLng(point.lat, point.lng);

        maps[i] = new google.maps.Map(document.getElementsByClassName('Gmap')[i], {
            zoom: point.zoom,
            center: latlng
        });

        markers[i] = new google.maps.Marker({
            position: latlng,
            map: maps[i]
        });
    }
}

加载Google地图脚本后，此代码将使用回调函数运行，并且效果很好，但是每张地图仅显示一个标记。

我需要在每个地图上添加多个标记，我当时正在考虑将标记坐标包含在“坐标”数组中：

    var coords = [
    {lat: 53.647143, lng: -2.317803, zoom: 10, marks: [
        {mlat: 53.647143, mlng: -2.317803, mCont: "<p>aaa</p>"},
        {mlat: 53.576524, mlng: -2.429149, mCont: "<p>bbb</p>"}
]},
    {lat: 53.259065, lng: -4.417487, zoom: 7, marks: [
        {mlat: 53.259065, mlng: -4.417487, mCont: "<p>ccc</p>"},
        {mlat: 53.412303, mlng: -3.004262, mCont: "<p>ddd</p>"},
        {mlat: 54.234574, mlng: -4.548636, mCont: "<p>eee</p>"}
]}
];

但是我不确定如何将其实现到代码中以使其起作用吗？

代码运行：https://jsfiddle.net/wfmztu8v/9/

Answer 1

可能会有更好的方法来定义数据。但是使用现有的格式，这行得通：

function initMap() {
  for (var i = 0, length = coords.length; i < length; i++) {
    // create the map
    var point = coords[i];
    var latlng = new google.maps.LatLng(point.lat, point.lng);
    maps[i] = new google.maps.Map(document.getElementsByClassName('map')[i], {
      zoom: point.zoom,
      center: latlng
    });
    // process the markers for the map
    for (var j = 0; j < coords[i].marks.length; j++) {
      if (!markers[i]) markers[i] = [];
      if (!infowindow[i]) infowindow[i] = new google.maps.InfoWindow();
      markers[i][j] = new google.maps.Marker({
        position: {
          lat: coords[i].marks[j].mlat,
          lng: coords[i].marks[j].mlng
        },
        map: maps[i]
      });
      // open an infowindow when marker clicked
      google.maps.event.addListener(markers[i][j], 'click', (function(map, content, infowindow) {
        return function(e) {
          infowindow.setContent(content);
          infowindow.open(map, this);
        }
      })(maps[i], coords[i].marks[j].mCont, infowindow[i]));
    }
  }
}

updated fiddle

代码段：

var coords = [{
    lat: 53.647143,
    lng: -2.317803,
    zoom: 10,
    marks: [{
        mlat: 53.647143,
        mlng: -2.317803,
        mCont: "<p>aaa</p>"
      },
      {
        mlat: 53.576524,
        mlng: -2.429149,
        mCont: "<p>bbb</p>"
      }
    ]
  },
  {
    lat: 53.259065,
    lng: -4.417487,
    zoom: 7,
    marks: [{
        mlat: 53.259065,
        mlng: -4.417487,
        mCont: "<p>ccc</p>"
      },
      {
        mlat: 53.412303,
        mlng: -3.004262,
        mCont: "<p>ddd</p>"
      },
      {
        mlat: 54.234574,
        mlng: -4.548636,
        mCont: "<p>eee</p>"
      }
    ]
  }
];
var markers = [];
var maps = [];
var infowindow = [];

function initMap() {
  for (var i = 0, length = coords.length; i < length; i++) {
    var point = coords[i];
    var latlng = new google.maps.LatLng(point.lat, point.lng);

    maps[i] = new google.maps.Map(document.getElementsByClassName('map')[i], {
      zoom: point.zoom,
      center: latlng
    });
    for (var j = 0; j < coords[i].marks.length; j++) {
      if (!markers[i]) markers[i] = [];
      if (!infowindow[i]) infowindow[i] = new google.maps.InfoWindow();
      markers[i][j] = new google.maps.Marker({
        position: {
          lat: coords[i].marks[j].mlat,
          lng: coords[i].marks[j].mlng
        },
        map: maps[i]
      });
      google.maps.event.addListener(markers[i][j], 'click', (function(map, content, infowindow) {
        return function(e) {
          infowindow.setContent(content);
          infowindow.open(map, this);
        }
      })(maps[i], coords[i].marks[j].mCont, infowindow[i]));
    }
  }
}
initMap();

html,
body {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

#mapNorth {
  height: 49%;
  width: 98%;
  float: top;
  border: 1px solid black;
}

#mapSouth {
  height: 49%;
  width: 98%;
  border: 1px solid black;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="mapNorth" class="map"></div>
<div id="mapSouth" class="map"></div>

Answer 2

问题是您的代码将marker0放在map0上，而marker1放在了map1上……您必须第二次迭代标记。.

var coords = [
    [{lat: 53.647143, lng: -2.317803, zoom: 10, marks: [ 
        {mlat: 53.647143, mlng: -2.317803, mCont: "<p>aaa</p>"},
        {mlat: 53.576524, mlng: -2.429149, mCont: "<p>bbb</p>"}
        ]
        }],
    [{lat: 53.259065, lng: -4.417487, zoom: 7, marks: [
        {mlat: 53.259065, mlng: -4.417487, mCont: "<p>ccc</p>"},
        {mlat: 53.412303, mlng: -3.004262, mCont: "<p>ddd</p>"},
        {mlat: 54.234574, mlng: -4.548636, mCont: "<p>eee</p>"}
      ]
    }]
];

var markers = [];
var maps = [];
var dot = [];
var dots = [];

function initMap() {

  /* This will add all markers of coords[i] to maps[i] */

  function placeMarkersOnMap(i) {
    for (var x = 0, length1 = coords[i][0].marks.length; x < length1; x++) {
      dots[x] = coords[i][0].marks[x];
      dot[x] = new google.maps.LatLng(dots[x].mlat, dots[x].mlng);

      markers[x] = new google.maps.Marker({
        position: dot[x],
        map: maps[i]
      });
    }
  }

  for (var i = 0, length = coords.length; i < length; i++) {
    var point = coords[i];
    console.log(point[0].lat)
    var latlng = new google.maps.LatLng(point[0].lat, point[0].lng);

    maps[i] = new google.maps.Map(document.getElementsByClassName('map')[i], {
      zoom: point[0].zoom,
      center: latlng
    });

    placeMarkersOnMap(i);
  }
}
initMap();