1

ワークライトでマルチページ アプリを開発しています。
このアプリでは、サンプル アプリ (これも Worklight が提供) に基づいて、Worklight が提供する位置情報サービスを実装しようとしています。

緯度と経度を取得できます。緯度と経度を使用して、Google マップで位置を特定し、地図を表示しようとしています。また、緯度と経度に基づいてマーカーを追加したいと考えています。

以下は私のHTMLページです：

<div class="longitude">Longitude: 
                <input type="text" id="long"/>
            </div>
            <div class="latitude">Latitude: 
                <input type="text" id="lat"/>
            </div>
            <div id="googleMap" style="width:500px;height:380px;"></div>  
<script type="text/javascript" src="//maps.googleapis.com/maps/api/js key=AIzaSyBGTVsuc8dBv8o0sgBV9A8huVo36LPFMA8&sensor=false"> </script>

対応する .js ファイル:

currentPage={};
currentPage.init = function() {
    WL.Logger.debug("LocationServices : : init");
};

function loadLatLong() {
    // start up acquisition process
    getFirstPositionAndTrack();
   // keep running while in background on Android; will show a notification
    WL.App.setKeepAliveInBackground(true);  
};



 function getFirstPositionAndTrack() {  
        window.alert('Click OK to proceed to acquire starting position');
   // we want to have an up to date, rough idea where the user is:
        var geoPolicy = WL.Device.Geo.Profiles.RoughTracking();
        // RoughTracking policy can re-use old positions (so it may only update once a minute)
        // change our policy to once a second:
        geoPolicy.maximumAge = 1000; 

    // note: to see at high-accuracy, change RoughTracking above to LiveTracking
    // get the user's current position
    WL.Device.Geo.acquirePosition(
            function(pos) {
                // when we receive the position, we display it and starton-going acquisition
                displayPosition(pos);
                triggers = {
                    Geo: {
                        posChange: { // display all movement
                            type: "PositionChange",
                            callback: function(deviceContext) {
                                    displayPosition(deviceContext.Geo);
                                }
                        },

                        leftArea: { // alert when we have left the area
                            type: "Exit",
                            circle: {
                                longitude: pos.coords.longitude,
                                latitude: pos.coords.latitude,
                                radius: 200
                            },
                            callback: function() {
                                window.alert('Left the area');
                            }
                        },

                        dwellArea: { // alert when we have stayed in the vicinity for 3 seconds
                            type: "DwellInside",
                            circle: {
                                longitude: pos.coords.longitude,
                                latitude: pos.coords.latitude,
                                radius: 50
                            },
                            dwellingTime: 3000,
                            callback: function() {
                                window.alert('Still in the vicinity');
                            }
                        }
                    }   
                };

                WL.Device.startAcquisition({ Geo: geoPolicy }, triggers, { Geo: alertOnGeoAcquisitionErr } );               
            },
            function(geoErr) {
                alert("geoErr");
                alertOnGeoAcquisitionErr(geoErr);
                // try again:
                getFirstPositionAndTrack();
            },
            geoPolicy
        ); 
}   

// display the position to the user
function displayPosition(pos) {
    /*alert(pos.coords.longitude);
    alert(pos.coords.latitude);*/
    $('#long').val(pos.coords.longitude);
    $('#lat').val(pos.coords.latitude);
    var mapProp = {
              center:new google.maps.LatLng(pos.coords.latitude,pos.coords.longitude),
              zoom:5,
              mapTypeId:google.maps.MapTypeId.ROADMAP
              };
            var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

function alertOnGeoAcquisitionErr(geoErr) {
    window.alert('Error acquiring geo (' + geoErr.code + '): ' + geoErr.message);
}

}

次の権限も追加しましたAndroidManifest.xml。

<meta-data
    android:name="com.google.android.maps.v2.API_KEY"
    android:value="AIzaSyAuYLZwW-9mFrw4mHkf-CLXOWglZBwhbhk"/> 

    <permission
        android:name="com.DemoPoC.permission.MAPS_RECEIVE"
        android:protectionLevel="signature" />

    <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS"/>
    <uses-permission android:name="com.google.android.providers.gsf.permission.READ_GSERVICES"/>
    <uses-permission android:name="com.DemoPoC.permission.MAPS_RECEIVE" />
    <uses-permission android:name="android.permission.INTERNET"/>  
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>  
    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/>  
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>  
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>


誰かが私が間違っていることを教えてもらえますか?

4

1 に答える 1

0

いくつかのささいなことがあります…主に、あなたは欠けていますか？maps.googleapis.com/maps/api/js と HTML 内の API キーの間。

位置にマーカーを付けたい場合は、それを displayPosition() に追加する必要があります。

var centerMarker = new google.maps.Marker({
    position : new google.maps.LatLng(pos.coords.latitude,
            pos.coords.longitude),
    clickable : false,
    zIndex : 999,
    map : map
});

新しいオブジェクトを作成するのではなく、更新時にそれらを移動できるように、マップをグローバルにマーカーとして保存する必要があります。

getFirstPositionAndTrack は alertOnGeoAcquisitionErr を参照しますが、その関数はそのスコープで定義されていません。

そしてもちろん、あなたはそれについて言及していませんが、loadLatLong() は wlCommonInit の実行中または実行後に呼び出す必要があります。

それでうまくいくようです。

于 2013-11-19T15:03:16.143 に答える