0
Я использую nokia maps javascript api, можно разместить сетку на карте?Можно ли разместить сетку в картах Nokia?
A
ответ
1
Самый простой способ сделать это - использовать прозрачную сетку PNG в качестве наложения.
Сначала создайте файл PNG 256x256, как показано ниже.
Затем использовать его в качестве getTileUrl() функции, поэтому он возвращается через все тайлов на карте.
var getTileUrl = function (zoom, row, column) {
return "http://i.stack.imgur.com/M1ncK.png";
};
В результате получается нечто вроде этого:
Пример можно увидеть ниже, с вашим собственным 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>
определить 'grid' .... можно интерпретировать как HTML таблицы наложения или координат соответствующей сетки – charlietfl