1. 首页
  2. 问答
  3. 是否可以在诺基亚地图中放置网格？

是否可以在诺基亚地图中放置网格？

2013-04-03 41 views

回答

1

最简单的方法是使用透明的网格PNG作为覆盖层。

首先创建一个256x256 PNG文件，如下所示。

Grid.PNG

然后使用，作为您getTileUrl()功能，所以它返回在所有地图图块的地图上。

var getTileUrl = function (zoom, row, column) {    
     return "http://i.stack.imgur.com/M1ncK.png"; 
};

的结果是这样的：

enter image description here

一个例子可以看到下面，用自己的PNG文件，当然app id and token。

/* Set authentication token and appid 
 
    * 
 
    * please register on http://api.developer.nokia.com/ 
 
    * and obtain your own developer's API key 
 
    */ 
 
    nokia.Settings.set("appId", "MY APP ID"); 
 
    nokia.Settings.set("authenticationToken", "MY TOKEN"); 
 
     
 
     // Get the DOM node to which we will append the map 
 
     var mapContainer = document.getElementById("mapContainer"); 
 
     // Create a map inside the map container DOM node 
 
     var map = new nokia.maps.map.Display(mapContainer, { 
 
     \t // initial center and zoom level of the map 
 
     \t center: [52.515, 13.405], 
 
     \t zoomLevel: 14, 
 
     \t components: [ 
 
     \t \t // ZoomBar provides a UI to zoom the map in & out 
 
     \t \t new nokia.maps.map.component.ZoomBar(), 
 
     \t \t // We add the behavior component to allow panning/zooming of the map 
 
     \t \t new nokia.maps.map.component.Behavior() 
 
     \t ] 
 
     }); 
 
     var getTileUrl = function (zoom, row, column) { 
 
     
 
     \t \t return "http://i.stack.imgur.com/M1ncK.png"; 
 
     \t }; 
 
     
 
     \t tileProviderOptions = { 
 
     \t \t getUrl: getTileUrl, // Obligatory function 
 
     \t \t max:20, // The highest zoom level for the overlay. 
 
     \t \t min:1, // The lowest zoom level for the overlay. 
 
     \t \t opacity: 0.5, // Overlay opacity.0 is fully transparent, 1 is fully opaque. 
 
     \t \t alpha:true // This value tells the renderer to read the alpha channel; required if opacity is used. 
 
     \t }, 
 
     \t // Create an overlay by calling the constructor for ImgTileProvider 
 
     \t gridOverlay = new nokia.maps.map.provider.ImgTileProvider(tileProviderOptions); 
 
     \t 
 
     // Add the overlay to the map 
 
     map.overlays.add(gridOverlay);
html { 
 
     \t \t \t \t overflow:hidden; 
 
     \t \t \t } 
 
     \t \t \t 
 
     \t \t \t body { 
 
     \t \t \t \t margin: 0; 
 
     \t \t \t \t padding: 0; 
 
     \t \t \t \t overflow: hidden; 
 
     \t \t \t \t width: 100%; 
 
     \t \t \t \t height: 100%; 
 
     \t \t \t \t position: absolute; 
 
     \t \t \t } 
 
     \t \t \t 
 
     \t \t \t #mapContainer { 
 
     \t \t \t \t width: 100%; 
 
     \t \t \t \t height: 100%; 
 
     \t \t \t \t left: 0; 
 
     \t \t \t \t top: 0; 
 
     \t \t \t \t position: absolute; 
 
     \t \t \t }
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
     <html xmlns="http://www.w3.org/1999/xhtml"> 
 
     \t <head> 
 
     \t \t <meta http-equiv="X-UA-Compatible" content="IE=7; IE=EmulateIE9; IE=EmulateIE10;"/> 
 
     \t \t <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
 
     \t \t <title>Nokia Maps Example: Adding an overlay to the map</title> 
 
     \t \t <script type="text/javascript" charset="UTF-8" src="http://api.maps.nokia.com/2.2.4/jsl.js?with=all"></script> 
 
     \t \t <style type="text/css"> 
 
     \t \t \t 
 
     \t \t </style> 
 
     \t </head> 
 
     \t <body> 
 
     \t \t <div id="mapContainer"></div> 
 
     \t \t <div id="uiContainer"></div> 
 

 
     \t </body> 
 
     </html>

来源

2013-04-08 13:40:01

相关问题

 相关问题