1. 首頁
  2. 問答
  3. 打印/導出地圖的一部分

打印/導出地圖的一部分

2013-02-11 71 views

回答

0

如果您使用的是企業版Maps API for JavaScript，則可以添加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);

一個例子可以發現here，但屏幕捕獲可與火狐只有。

如果您使用的是基礎Maps API for JavaScript和你的地圖是比較簡單的，你可以使用MapImage API，產生的URL可以在<IMG>元素內使用嘗試通過mapObjects循環，並生成對應的網址，並且可以幫助你打印內容。

我寫了一個基本的地圖和標記下方的快捷網址發生器：

<!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>

在app id and token代得到它的，當然工作。

來源

2013-02-11 17:03:33

相關問題

 相關問題