有没有办法打印地图的可见部分？
所以我尝试使用jQuery打印内容div但是我得到了空页。
有什么想法吗？
答案 0 :(得分：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，但屏幕截图适用于仅限Firefox 。
如果您使用的是基础Maps API for JavaScript且地图相对简单，您可以尝试循环浏览mapObjects并使用MapImage API生成等效的网址，生成的网址可以是在<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("&#",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代替当然可以使用它。