允许用户将kml导入到诺基亚定位应用

时间:2012-12-14 09:07:32

标签: html5 kml kmz here-api

我只是想知道是否可以允许用户打开或将自己的KML / KMZ文件加载到Here Maps的移动html5版本中,并让它们通过api中包含的图层按钮激活或停用kml图层?

1 个答案:

答案 0 :(得分:0)

目前看起来不太可能。 addLayer()方法可用于添加叠加层,如下所示,但未设置为读取KML。如果您正在考虑加载KML,那么最好使用Maps API for JavaScript,如本示例所示http://developer.here.net/apiexplorer/examples/api-for-js/data-visualization/display-data-on-map.html

或者你可以查看jHERE库,它确实从底层库中公开了KML支持。

由于Mobile HMTL5库不提供折线实现,因此很难将KML路径添加到地图中,但可以使用JavaScript库加载一组标记的数据然后添加标记使用 addPOI()方法,但这似乎相当复杂。

这是一个基于按下按钮的工作叠加层:

<!doctype html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=100">
    <!-- Definitions of mobile-friendly documents e.g. for BlackBerry: -->
    <meta name="HandheldFriendly" content="True">
    <!-- Definitions of mobile-friendly documents for Microsoft Browser: -->
    <meta name="MobileOptimized" content="width">
    <!-- iOS viewport definitions: -->
    <!--meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <!-- disable BlackBerry UI events -->
    <meta name="touch-event-mode" value="native">
    <meta name="cursor-event-mode" value="native">
    <!-- disables address sniffing -->
    <meta name="format-detection" content="telephone=no"/>
    <meta name="format-detection" content="address=no"/>

    <link rel="stylesheet" href="http://api.maps.nokia.com/mobile/latest/lib/mh5.css" type="text/css">
    <link rel="stylesheet" href="http://api.maps.nokia.com/mobile/latest/lib/colors.css" type="text/css">
    <style>
        .mh5_ProgressBar {
            width: 300px;
            left: 20px;
            position: relative;
        }
        .mh5_Map {
            height: auto;
            -webkit-box-flex: 1;
            -ms-flex:         1 0 auto;
            box-flex:         1;
        }
    </style>
</head>
<body>
        <div id="mapContainer" style="height: 480px; width: 320px;"></div>

        <script src="http://api.maps.nokia.com/mobile/1.0.0/lib/mh5.js"></script>

    <script type="text/javascript">
           nokia.mh5.assetsPath = "../../lib/";
        nokia.mh5.appId = "demo_wwzrmoloHAFVvyW";
        nokia.mh5.appCode = "Vgl_08RQWnjJo92Lw1F_uQ";

        var progressObject,
            page = new nokia.mh5.ui.Page({
                children: ["controls",  "map"],
                layout: {
                    type: nokia.mh5.ui.RowLayout
                },
                visible: true,
                controls: {
                    control: nokia.mh5.ui.Container,
                    children: [ "show" ],
                    layout: {
                        type: nokia.mh5.ui.ColumnLayout
                    },

                    show: {
                        control: nokia.mh5.ui.Button,
                        text: "Show",
                        disabled: false,
                        onClick: function() {
                            page.map.addLayer(oldBerlin, "OLD_BERLIN");
                        }
                    }
                },

                map: {
                    control: nokia.mh5.components.Map,
                    center: {
                        longitude: 13.405,
                        latitude: 52.515
                    },
                    //enable either box or zoom
                    zoom: 13,
                    schema: "normal.day"
                }
            });

        document.body.appendChild(page.root);



      var oldBerlin = function(column,row,z){
        var zoom = 0;

        while (z > 1){
                zoom++;
                z = z /2;
        }

        if (((zoom == 12) &&  ( row != 1343  || column != 2200))||
            ((zoom ==13) &&  ( row < 2686 || column < 4400 || row >   2687 || column > 4401 ))||
            ((zoom == 14) &&  ( row <  5372 || column < 8800 || row >   5375 || column > 8803  ))||
            ((zoom  == 15)  &&  ( row  < 10744 || column < 17601 || row >   10750 || column > 17607 ))) {
                return "http://developer.here.net/apiexplorer/examples/res/old_berlin_overlay_tiles/blank.png";
        }

        return "http://developer.here.net/apiexplorer/examples/res/old_berlin_overlay_tiles/"+ zoom + "/"+ row+ "/" + column + ".png";
     };


    </script>

</body>
</html>