android - 如何使用 OpenStreetMap/OpenLayers?

标签 android cordova openlayers openstreetmap

我正在搜索如何将 OpenStreetMap 与 PhoneGap 和 Android 结合使用的示例。
我在网上只找到了旧的例子,f.e. http://mab.edina.ac.uk/geomobile-test/osm.html ,但它不适用于最新的 PhoneGap,我遵循了 PhoneGap 上的教程。

list .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:

<!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(http://openlayers.org/dev/examples/img/mobile-zoombar.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)

感谢您的任何建议。

最佳答案

当我删除 50000 并只将一个参数传递给 loadUrl 时,崩溃就消失了。看来1.2的timeout参数可能有问题。

关于android - 如何使用 OpenStreetMap/OpenLayers?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8100219/

相关文章:

java - 存储客户端信息并将其发送回客户端的安全方式 - java spring mvc

javascript - 如何使按钮执行相同的代码但相应地具有不同的变量?

openlayers - 如何在 OpenLayers.Layer.Markers 层中移动标记?

java - Android开发-OnTouchListener-如何使用?

java - 内容的最大长度?

android - Flutter 中的 AndroidManifest 中缺少默认通知 channel 元数据

android - 我的 android ListView 不滚动

javascript - MeteorJs 将 Cordova 条码扫描仪放在固定 div 内

javascript - Cordova javascript 无法在模拟器上运行

javascript - Uncaught ReferenceError : $ is not defined shapefile