时间戳

首页 > 解决方案 > 谷歌地图。多个带有内容的标记的多张地图

javascript - 谷歌地图。多个带有内容的标记的多张地图

问题描述

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

来自问题：一页中的多个googleMaps 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]
        });
    }
}

一旦加载了谷歌地图脚本，这段代码就会使用回调运行，并且运行良好，但每张地图只显示一个标记。

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

    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/

标签： javascriptgoogle-maps

解决方案

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

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

更新的小提琴

结果地图的屏幕截图

代码片段：

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>

推荐阅读