0

nokia maps javascript apiを使用していますが、マップにグリッドを配置できますか?

4

1 に答える 1

1

これを行う最も簡単な方法は、透明なグリッド PNG をオーバーレイとして使用することです。

最初に、以下に示すように 256x256 PNG ファイルを作成します。

Grid.PNG

次にgetTileUrl() 、それを関数として使用して、マップ上のすべてのマップ タイルに対して返されるようにします。

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

結果は次のようになります。

ここに画像の説明を入力

独自の PNG ファイル、アプリ ID、もちろんトークンを使用した例を以下に示します。

    /*  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, {
        	// initial center and zoom level of the map
        	center: [52.515, 13.405],
        	zoomLevel: 14,
        	components: [
        		// ZoomBar provides a UI to zoom the map in & out
        		new nokia.maps.map.component.ZoomBar(), 
        		// We add the behavior component to allow panning / zooming of the map
        		new nokia.maps.map.component.Behavior()
        	]
        });
        var getTileUrl = function (zoom, row, column) {
        
        		return "http://i.stack.imgur.com/M1ncK.png";
        	};
        
        	tileProviderOptions = {
        		getUrl: getTileUrl, // Obligatory function
        		max:20, // The highest zoom level for the overlay.
        		min:1, // The lowest zoom level for the overlay.
        		opacity: 0.5, // Overlay opacity.0 is fully transparent, 1 is fully opaque.
        		alpha:true // This value tells the renderer to read the alpha channel; required if opacity is used.
        	},
        	// Create an overlay by calling the constructor for ImgTileProvider
        	gridOverlay = new nokia.maps.map.provider.ImgTileProvider(tileProviderOptions);
        	
        // Add the overlay to the map
        map.overlays.add(gridOverlay);
html {
        				overflow:hidden;
        			}
        			
        			body {
        				margin: 0;
        				padding: 0;
        				overflow: hidden;
        				width: 100%;
        				height: 100%;
        				position: absolute;
        			}
        			
        			#mapContainer {
        				width: 100%;
        				height: 100%;
        				left: 0;
        				top: 0;
        				position: absolute;
        			}
        <!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">
        	<head>
        		<meta http-equiv="X-UA-Compatible" content="IE=7; IE=EmulateIE9; IE=EmulateIE10;"/>
        		<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
        		<title>Nokia Maps Example: Adding an overlay to the map</title>
        		<script type="text/javascript" charset="UTF-8" src="http://api.maps.nokia.com/2.2.4/jsl.js?with=all"></script>
        		<style type="text/css">
        			
        		</style>
        	</head>
        	<body>
        		<div id="mapContainer"></div>
        		<div id="uiContainer"></div>

        	</body>
        </html>

于 2013-04-08T13:40:01.053 に答える