Openlayers mobile OpenLayers.Icon() fails

StackOverflow https://stackoverflow.com/questions/22834153

题

I am developing with phonegap an mobile app. I would like to show the actual position of the user on a map.

I use following libs:

<script type="text/javascript" charset="utf-8" src="js/libraries/OpenLayers_2.13/OpenLayers.js"></script>
<script type="text/javascript" charset="utf-8" src="js/libraries/OpenLayers_2.13/OpenLayers.mobile.js"></script>

After this I call the init function:

<body onload="init();">

My javascript code look like this:

/*************************************************************************
* globale Variablen
************************************************************************/
/* Kartenvariablen */
map             = null;
mapnik          = null;
akt_pos_markers = null;
akt_pos_marker  = null;

/* init_status: 1 (ready), 0 (not ready) */
init_status = 0;
/* akt_modus: start, pause, ende */
last_modus = "";
akt_modus = "";

function init() {

$("select#sel_trackingoptionen #opt_opt, select#sel_trackingoptionen #opt_pause, select#sel_trackingoptionen #opt_stop ")
    .prop('disabled', true);
$("select#sel_trackingoptionen").selectmenu("refresh",true);

header = $("#header").height();
wrapper_geolocation = $("#wrapper_geolocation").height();
fensterh = $(window).height();
fensterw = $(window).width();
fenster = fensterw;
if(fensterh>fensterw){
    fenster = fensterh;
}
$("#basicMap").css("height",(fenster-header)+"px");


map = new OpenLayers.Map("basicMap");
mapnik         = new OpenLayers.Layer.OSM();
fromProjection = new OpenLayers.Projection("EPSG:4326");   // Transform from WGS 1984
toProjection   = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection
var position       = new OpenLayers.LonLat(13.41,52.52).transform( fromProjection, toProjection);
var zoom           = 15; 

map.addLayer(mapnik);
map.setCenter(position, zoom );

init_status = 1;
}

// Wait for PhoneGap to load
//
document.addEventListener("deviceready", onDeviceReady, false);

var watchID = null;

// PhoneGap is ready
//
function onDeviceReady() {  
registerListenerToggleGeolocation();

// Update every 3 seconds
    var options = { frequency: 3000, enableHighAccuracy: true, maximumAge: 90000 };
    watchID = navigator.geolocation.watchPosition(onSuccess, onError, options);

}

// onSuccess Geolocation
//
function onSuccess(position) {
if(init_status==1){
    fromProjection = new OpenLayers.Projection("EPSG:4326");   // Transform from WGS 1984
    toProjection   = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection

    var element = document.getElementById('geolocation');

    lat = position.coords.latitude;
    lon = position.coords.longitude;

    latG = Math.floor(lat);
    latM = Math.floor((lat-latG)*60);
    latS = (Math.floor(((lat-latG)*60-latM)*1000)*60)/1000;

    lonG = Math.floor(lon);
    lonM = Math.floor((lon-lonG)*60);
    lonS = (Math.floor(((lon-lonG)*60-lonM)*1000)*60)/1000;

    jetzt = new Date();

    /* show positiondata */
    element.innerHTML = 'Breitengrad: '          + Math.floor(lat*100000)/100000 +' ('+latG+'° '+latM+"' "+latS+"''"+') <br />' +
                            'Längengrad: '       + Math.floor(lon*100000)/100000     +' ('+lonG+'° '+lonM+"' "+lonS+"''"+')<br />' +
                            'Höhe über NN in m: '+ position.coords.altitude              + '<br />' +
                            'Genauigkeit in m: ' + position.coords.accuracy              + '<br />' +
                            'Richtung: '         + position.coords.heading               + '<br />' +
                            'Geschwindigkeit: '  + position.coords.speed                 + '<br />' +
                            'Zeit: '             + ("0"+jetzt.getDate()).slice(-2)+"."+("0"+(jetzt.getMonth()+1)).slice(-2)+"."+jetzt.getFullYear()+" "+("0"+jetzt.getHours()).slice(-2)+":"+("0"+jetzt.getMinutes()).slice(-2)+" Uhr"          + '<br />';

    /* show position */
    if(map!=""){
        var size = new OpenLayers.Size(15, 15);
        var offset = new OpenLayers.Pixel(-(size.w / 2), -size.h);
        **var icon = new OpenLayers.Icon('img/tracking/img_green_position_image.png', size, offset);**

        if(akt_pos_markers!=null){
            akt_pos_markers.removeMarker(marker);
        }
        else{
            akt_pos_markers = new OpenLayers.Layer.Markers("Position");
            map.addLayer(akt_pos_markers);
        }

        var position       = new OpenLayers.LonLat(lon,lat).transform(fromProjection, toProjection);

        akt_pos_marker = new OpenLayers.Marker(position,icon);

        akt_pos_markers.addMarker(akt_pos_marker);      

        map.setCenter(position, map.getZoom() );
    }
   }
}

Unfortunately the code fails at the line var icon = new OpenLayers.Icon('img/tracking/img_green_position_image.png', size, offset); with the follwing error at the chrome ripple emulator:

TypeError: undefined is not a function
at onSuccess (http://127.0.0.1:8020/MeinSporttagebuchApp/MeinSporttagebuch/www/js/webviews/tracking.js:101:18)
at win (http://127.0.0.1:8020/MeinSporttagebuchApp/MeinSporttagebuch/www/js/libraries/cordova.js:5215:6)
at _getCurrentPosition (chrome-extension://geelfhphabnejjhdalkjhgipohgpdnoc/ripple.js:40:12351)
at Object.module.exports.addWatch (chrome-extension://geelfhphabnejjhdalkjhgipohgpdnoc/ripple.js:40:12934)
at module.exports.exec (chrome-extension://geelfhphabnejjhdalkjhgipohgpdnoc/ripple.js:40:22917)
at Object.geolocation.watchPosition (http://127.0.0.1:8020/MeinSporttagebuchApp/MeinSporttagebuch/www/js/libraries/cordova.js:5218:5)
at onDeviceReady (http://127.0.0.1:8020/MeinSporttagebuchApp/MeinSporttagebuch/www/js/webviews/tracking.js:62:37)
at Channel.fire (http://127.0.0.1:8020/MeinSporttagebuchApp/MeinSporttagebuch/www/js/libraries/cordova.js:625:16)
at http://127.0.0.1:8020/MeinSporttagebuchApp/MeinSporttagebuch/www/js/libraries/cordova.js:224:36

Any suggestions to solve this problem? Thanks in advance.

有帮助吗？

解决方案

I solved this issue. I have to leave off the openlayers.mobile.js:

<script type="text/javascript" charset="utf-8" src="js/libraries/OpenLayers_2.13/OpenLayers.mobile.js"></script>

Does anyone know if this will cause other problems?

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top