printing - 打印/导出地图的一部分

Question

有没有办法打印地图的可见部分？

所以我尝试使用 jQuery 打印内容 div，但我得到了一个空页面。

有任何想法吗？

score 0 · Accepted Answer

如果您使用的是适用于 JavaScript 的 Enterprise Maps API，则可以添加一个ContextMenu.captureHandler，以便在右键单击上下文菜单时创建地图屏幕捕获图像。

 var contextMenu = new nokia.maps.map.component.ContextMenu();
  contextMenu.addHandler(nokia.maps.map.component.ContextMenu.captureHandler);
  contextMenu.removeHandler(nokia.maps.map.component.ContextMenu.routingHandler);
  map.components.add(contextMenu);

可以在此处找到示例，但屏幕截图仅适用于 Firefox。

如果您使用JavaScript 的基本 Maps API并且您的地图相对简单，您可以尝试循环并使用MapImage APImapObjects生成等效的 URL，生成的 url 可以在元素中使用，这应该有助于您打印内容。<IMG>

我为下面的基本地图和标记编写了一个快速 URL 生成器：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="content-type" content="text/html; charset=us-ascii" />

  <title>KML Generator</title>
   <!-- This file is a simple URL editor/data generator. -->
        <script type="text/javascript" charset="UTF-8" src="http://api.maps.nokia.com/2.2.3/jsl.js"></script>

  <style type="text/css">
/*<![CDATA[*/
        #left {
                      position:relative;/*ie needs this to show float */
                      width:50%;/* same as the left margin on #outer*/
                      float:left;
                      left:-2px;/* push column into position*/
              }
              #left p {padding-left:2px;padding-right:2px}
              #right p {padding-left:2px;padding-right:2px}

              #right {
                      position:relative;/*ie needs this to show float */
                      width:50%;/* same as right margin on #outer*/
                      float:right;
                      left:2px;/* push column into position*/
              }
              #footer {
                      width:100%;
                      clear:both;
                      position:relative;
              }
              .nm_bubble_content{
                  color:white
              }


  /*]]>*/
  </style>
</head>

<body>
  <div>
    <div id="left">
      <div id="map" style="width: 800px; height: 400px;"></div>
    </div>

    <div id="right">
      lat: <span id="lat">?</span> long : <span id="lng"></span>?<br />

      <label for="title">Title</label> <input id="title" /><br />

      <input id="button1" type="button" value="Update Marker" onclick="editMarker(false)" />    
      <input id="button2" type="button" value="Delete Marker" onclick="deleteMarker()" />

    </div>
  </div>

  <div id="footer">
    <strong>KML</strong>
    <input id="button6" type="button" value="Create URL" onclick="saveMapObjects(map)" />    

    <br />

    <label for="urloutput">Output:</label> 
    <textarea id="urloutput" cols="120" rows="3"></textarea><br />
    <hr />
  </div>


  <script type="text/javascript">
/*<![CDATA[*/       
/////////////////////////////////////////////////////////////////////////////////////
// Don't forget to set your API credentials
//
// Replace with your appId and token which you can obtain when you 
// register on http://api.developer.nokia.com/ 
//
            nokia.Settings.set( "appId", "APP ID"); 
            nokia.Settings.set( "authenticationToken", "TOKEN");
//          
/////////////////////////////////////////////////////////////////////////////////////
/*]]>*/         
</script>
<script type="text/javascript">         
  // Set up variables pointing to the various text boxes, these
  // are used to display the texts for editing. 
  var lat = document.getElementById("lat");
  var lng = document.getElementById("lng");
  var title = document.getElementById("title");









  // Current Marker a reference to the latest marker to be added or edited.
  var currentMarker;

  // This is the map we can put KML elements on.
  var map = new nokia.maps.map.Display(document.getElementById("map"), {
        'components': [ 
                //behavior collection
                new nokia.maps.map.component.Behavior(),
                new nokia.maps.map.component.ZoomBar(),
                new nokia.maps.map.component.Overview(),
                new nokia.maps.map.component.TypeSelector(),
                new nokia.maps.map.component.ScaleBar() ],
        'zoomLevel': 12, //zoom level for the map
        'center': [52.51, 13.4] //center coordinates
  });
  // Remove zoom.MouseWheel behavior for better page scrolling experience
  map.removeComponent(map.getComponentById("zoom.MouseWheel"));

  // This will display the data from the <description> as HTML
  var infoBubbles = new nokia.maps.map.component.InfoBubbles();
  map.addComponent( infoBubbles);


  // Let's add an event to Long press on the map
  var EventTarget = nokia.maps.dom.EventTarget;
  var eventExEl = document.getElementById("map");

  // Attach EventTarget interface to the document to allow normalized events at the node.
  EventTarget(eventExEl);

  // Add a listener for the click event to the node and add a marker which shows an  if clicked.
  eventExEl.addListener("longpress", function(evt) {
        var markerData = new Object();
        // Retrieve the Coordinates from the map.
        markerData.coords = map.pixelToGeo(evt.targetX , evt.targetY);  
        // Set the title to the next number o the list for easy ident.
        markerData.title = map.objects.getLength() + 1;
        // Get the marker data from the edit boxes.

         currentMarker = addMarker(markerData);

  }, false);       

  // Removes the marker and removes the associated info bubble.
  function deleteMarker (){
        map.objects.remove(currentMarker);

  }



  // Changes the way a  marker is displayed or converts it from a marker to a waypoint.
  function editMarker(addWaypoint) {
        // deletes the current marker
        map.objects.remove(currentMarker);

      var markerData = new Object();
      // Read in the marker data from the edit boxes (and previously defined coordinates
      markerData.coords = currentMarker.coordinate;
      markerData.title = title.value;

        currentMarker = addMarker(markerData);



  }

  // Adds a new marker to the map, with additional functionality based on the edit box data.
  function addMarker(markerData) {

        var marker;

        if (markerData.title === undefined){
           markerData.title = "";
        }


            marker = new nokia.maps.map.StandardMarker(markerData.coords, {
                    text:  markerData.title, //small title
                    draggable: true,  //the marker is marked  to be draggable
                    $data: markerData

            });


        // When the marker is clicked, the edit boxes must be refreshed.
        marker.addListener("click" ,  function(evt) { 
                  if (evt.target.text === undefined){
                       title.value  = "";
                  } else {
                       title.value = evt.target.text; 
                  }



                  lat.innerHTML = evt.target.coordinate.latitude;
                  lng.innerHTML = evt.target.coordinate.longitude;


                  currentMarker = evt.target;
        }, false);

        // If a marker is dragged, we need to close the infobox.
        marker.addListener("drag" ,  function(evt) {                 
                 currentMarker = evt.target;
        }, false);

        map.objects.add(marker);
       return marker;

  }

//
// Library function for transforming extended characters into KML readable equivalents.
// This is required to ensure that the KML (which is a subset of XML) is syntactically
// Valid. The true HTML character codes may be found in the description element since
// it is held in a CDATA section, all other elements need to escape the & character
// which precedes the encoded character.
//
// It would be nice to add this as String prototype, but not all browsers support it.
//
function toUnicode (prefix, input){
        var output = "";

      var splitInput = (input===undefined) ? new Array() : input.split("");
        for (var i = 0; i < splitInput.length; i++){
                var currentChar = splitInput[i];
                // Encode any extended character plus &
                if (currentChar.charCodeAt()> 128 ||  currentChar.charCodeAt()== 38  || currentChar.charCodeAt()== 39 ) {
                        output = output +  prefix + currentChar.charCodeAt() + ";";
                } else {
                        output = output + currentChar;
                }           
        }

        return output;
}


  // Creates a valid URL file from the Map data.
  function saveMapObjects( map) {




        var markers = new Array();
        for (i=0; i< map.objects.getLength(); i++) {            
                if ( map.objects.get(i) instanceof nokia.maps.map.Marker ) { 
                         // Retrieve all the Marker data and add it to an array
                         var markerData = new Object();
                         markerData.id = toUnicode("&amp;#",map.objects.get(i).text);
                         markerData.latitude = map.objects.get(i).coordinate.latitude;
                         markerData.longitude = map.objects.get(i).coordinate.longitude;                        
                        markers.push(markerData); 

                }   
        }

        // Now output the URL, start with the standard parameters:
        var output = "http://m.nok.it/?"        
        + "app_id=" +  nokia.Settings.appId
        + "&token=" + nokia.Settings.authenticationToken
        + "&z=" + map.zoomLevel         
        + "&h=" +map.getDisplays()[0].height
        + "&w=" +map.getDisplays()[0].width;


         if (markers.length > 0){
              output = output  + "&poi="           

            // Loop nthrough the markers and add POI
            for (i=0; i< markers.length; i ++){
                    console.log (markers[i]);
                    output = output  + markers[i].latitude.toFixed(4) + "," + markers[i].longitude.toFixed(4);


                    if (i < markers.length-1){
                        output = output  +  ","
                    }
            }
        } else {
             output = output  + "&nord&nodot&c="    
                  + map.center.latitude.toFixed(4) + "," + map.center.longitude.toFixed(4);
        }

        output = output + "\n";
        document.getElementById("urloutput").value = output;
  }

  </script>
</body>
</html>

替换您的应用程序 ID 和令牌以使其正常工作。

printing - 打印/导出地图的一部分

1 回答 1

Related

Reference