如何使用OpenStreetMap的/的OpenLayers？如何使用、OpenStreetMap、OpenLayers

2023-09-06 03:56:04 作者：青春终将散场

我正在寻找一个例子，如何使用OpenStreetMap的用的PhoneGap和Android。我发现在网上只有老的例子，F.E. http://mab.edina.ac.uk/geomobile-test/osm.html ，但它并没有使用最新的PhoneGap的工作，我也跟着教程在PhoneGap的。

I am searching for an example how to use OpenStreetMap with PhoneGap and Android. I found only old examples at the web, f.e. http://mab.edina.ac.uk/geomobile-test/osm.html, but it didn't work with the newest PhoneGap, I followed the tutorial at PhoneGap.

的Manifest.xml：

Manifest.xml:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="de.h3llghost.phonegap.test"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk android:minSdkVersion="8" />

    <supports-screens
        android:anyDensity="true"
        android:largeScreens="true"
        android:normalScreens="true"
        android:resizeable="true"
        android:smallScreens="true" />

    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.VIBRATE" />
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
    <uses-permission android:name="android.permission.READ_PHONE_STATE" />
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.RECEIVE_SMS" />
    <uses-permission android:name="android.permission.RECORD_AUDIO" />
    <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
    <uses-permission android:name="android.permission.READ_CONTACTS" />
    <uses-permission android:name="android.permission.WRITE_CONTACTS" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.GET_ACCOUNTS" />

    <application
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name" >
        <activity
            android:configChanges="orientation|keyboardHidden"
            android:label="@string/app_name"
            android:name=".PhoneGapTestActivity" >
            <intent-filter >
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity
            android:configChanges="orientation|keyboardHidden"
            android:label="@string/app_name"
            android:name="com.phonegap.DroidGap" >
            <intent-filter >
            </intent-filter>
        </activity>
    </application>

</manifest>

主要类：

package de.h3llghost.phonegap.test;

import android.os.Bundle;
import com.phonegap.DroidGap;

public class PhoneGapTestActivity extends DroidGap {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        super.loadUrl("file:///android_asset/www/index.html");
        // Doesn't work there is something wrong with the timeout in PhoneGap
        //super.loadUrl("file:///android_asset/www/index.html", 50000);
    }
}

index.html的：

index.html:

<!DOCTYPE html">
<html>
<head>
    <title>SimpleIOL Demo: IOL</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <script type="text/javascript" charset="utf-8" src="phonegap-1.2.0.js"></script>
    <style>
        div.olControlZoomPanel {
            height: 108px;
            width: 36px;
            position: absolute;
            top: 20px;
            left: 20px;
        }
        div.olControlZoomPanel div {
            width: 36px;
            height: 36px;
            background-image: url(https://m.xsw88.com/allimgs/daicuo/20230906/908.png);
            left: 0;
        }
        div.olControlZoomPanel .olControlZoomInItemInactive {
            top: 0;
            background-position: 0 0;
        }
        div.olControlZoomPanel .olControlZoomToMaxExtentItemInactive {
            top: 36px;
            background-position: 0 -36px;
        }
        div.olControlZoomPanel .olControlZoomOutItemInactive {
            top: 72px;
            background-position: 0 -72px;
        }
    </style>

    <script src="http://openlayers.org/dev/OpenLayers.mobile.js"></script>
    <script type="text/javascript" charset="utf-8">
        var map;

        // Get rid of address bar on iphone/ipod
        var fixSize = function() {
            window.scrollTo(0,0);
            document.body.style.height = '100%';
            if (!(/(iphone|ipod)/.test(navigator.userAgent.toLowerCase()))) {
                if (document.body.parentNode) {
                    document.body.parentNode.style.height = '100%';
                }
            }
        };
        setTimeout(fixSize, 700);
        setTimeout(fixSize, 1500);

        function onBodyLoad()
        {
            document.addEventListener("deviceready",onDeviceReady,false);
        }

        /* When this function is called, PhoneGap has been initialized and is ready to roll */
        function onDeviceReady()
        {
        // create map
        map = new OpenLayers.Map({
            div: "map",
            theme: null,
            controls: [
                new OpenLayers.Control.Attribution(),
                new OpenLayers.Control.TouchNavigation({
                    dragPanOptions: {
                        enableKinetic: true
                    }
                }),
                new OpenLayers.Control.ZoomPanel()
            ],
            layers: [
                new OpenLayers.Layer.OSM("OpenStreetMap", null, {
                    transitionEffect: 'resize'
                })
            ],
            center: new OpenLayers.LonLat(742000, 5861000),
            zoom: 3
        });
        }
    </script>

</head>
  <body onload="onBodyLoad()">
    <div id="map"></div>
  </body>
</html>

我得到了下面的错误，也许有人把它运行的（固定）

11-11 21:29:46.210: D/DroidGap(871): DroidGap.loadUrl(file:///android_asset/www/index.html, 50000)
11-11 21:30:36.273: D/DroidGap(871): DroidGap.loadUrl(file:///android_asset/www/index.html)
11-11 21:30:36.273: D/DroidGap(871): DroidGap.init()
11-11 21:30:36.273: W/dalvikvm(871): threadid=7: thread exiting with uncaught exception (group=0x4001d800)
11-11 21:30:36.280: E/AndroidRuntime(871): FATAL EXCEPTION: Thread-8
11-11 21:30:36.280: E/AndroidRuntime(871): java.lang.RuntimeException: Can't create handler inside thread that has not called Looper.prepare()
11-11 21:30:36.280: E/AndroidRuntime(871):  at android.os.Handler.<init>(Handler.java:121)
11-11 21:30:36.280: E/AndroidRuntime(871):  at android.webkit.WebView$PrivateHandler.<init>(WebView.java:6252)
11-11 21:30:36.280: E/AndroidRuntime(871):  at android.webkit.WebView.<init>(WebView.java:395)
11-11 21:30:36.280: E/AndroidRuntime(871):  at android.webkit.WebView.<init>(WebView.java:920)
11-11 21:30:36.280: E/AndroidRuntime(871):  at android.webkit.WebView.<init>(WebView.java:910)
11-11 21:30:36.280: E/AndroidRuntime(871):  at android.webkit.WebView.<init>(WebView.java:901)
11-11 21:30:36.280: E/AndroidRuntime(871):  at com.phonegap.DroidGap.init(DroidGap.java:268)
11-11 21:30:36.280: E/AndroidRuntime(871):  at com.phonegap.DroidGap.loadUrlIntoView(DroidGap.java:381)
11-11 21:30:36.280: E/AndroidRuntime(871):  at com.phonegap.DroidGap.access$300(DroidGap.java:159)
11-11 21:30:36.280: E/AndroidRuntime(871):  at com.phonegap.DroidGap$3.run(DroidGap.java:537)
11-11 21:30:36.280: E/AndroidRuntime(871):  at java.lang.Thread.run(Thread.java:1096)

感谢您的任何建议。

Thanks for any advices.

如何使用OpenStreetMap的/的OpenLayers？如何使用、OpenStreetMap、OpenLayers

推荐答案