Question

我想打印一张谷歌地图，使用Googlemaps API v3.0创建，包括简单的标记和markerClusters。

以下是生成地图的代码：

map = new google.maps.Map(document.getElementById("map"), mapOptions);
    map.mapTypes.set('map_style', styledMap);
    map.setMapTypeId('map_style');

    var mcStyles = [{
      textColor: 'white',
      url: 'images/clusterIcon.png',
      height: 50,
      width: 50
    }];
    var mcOptions = {
        gridSize: 1,
        zoomOnClick: false,
        styles: mcStyles
    };
    var markerCluster = new MarkerClusterer(map, markers, mcOptions);

    //markerCluster should be always above the geocoder-->
    geocoder = new google.maps.Geocoder();

    console.log(cities.length);
    for (var i = 0; i < cities.length; i++) {
      var city = cities[i];
      geocodeCity(city, markerCluster);
    }

现在，我想使用Google Chrome浏览器打印整个地图，包括标记和标记群。我无法做到这一点。使用一种解决方案，我只看到标记，

var printMaps = function () {
      console.log('printMaps');

      var content = window.document.getElementById('map') // get you map details
      console.log(content);
      var newWindow = window.open(); // open a new window
      newWindow.document.write(content.innerHTML); // write the map into the new window
      newWindow.print(); // print the new window
    }
    $('#button-print').on('click', printMaps);

另一个只有带有聚类但没有简单标记的地图。

var printMaps = function () {
      var body               = $('body'),
          mapContainer       = $('#map'),
          mapContainerParent = mapContainer.parent(),

          printContainer     = $('<div>');

      body.prepend(printContainer);
      printContainer
          .addClass('print-container')
          .css('position', 'relative')
          .height(mapContainer.height())
          .append(mapContainer);

      var content = body.children()
          .not('script')
          .not(printContainer)
          .detach();

      console.log(content);

      window.print();

      body.prepend(content);
      mapContainerParent.prepend(mapContainer);
      printContainer.remove();
    };

    $('#button-print').on('click', printMaps);

有办法做到这一点吗？

Answer 1

请参阅：MarkerClusterer Printing Issue

MarkerClusterer无法打印，但是MarkerClustererPlus库克服了此限制。

使用标记和markerClusters打印Googlemap

1 个答案: