I'm having trouble getting any sort of interactivity from my first Cordova project. I have experience in HTML, Javascript and CSS, so I figured Cordova would be a perfect introduction to hybrid app development but I can't seem to get even a basic HTML button to work on the app.

从我的第一个科尔多瓦项目中，我很难得到任何形式的互动。我在HTML、Javascript和CSS方面有经验，所以我认为Cordova将是混合应用开发的完美介绍，但我似乎连基本的HTML按钮都无法在应用程序上工作。

I'm using Windows 10 with Android Studio and Cordova installed. I think I've set up the project file structure correctly. I've been following Cordova's docs and have installed the geolocation plugin on all device types. For testing I'm using both the virtual android devices in Android Studio, and an android phone (OnePlus X), it's connected correctly (the app opens up on the phone whenever I type "cordova run android" into the console).

我使用的是Windows 10，安装了Android Studio和Cordova。我想我已经正确地设置了项目文件结构。我一直在跟踪Cordova的文档，并在所有设备类型上安装了geolocation插件。为了测试，我使用了android Studio中的虚拟android设备和android手机(OnePlus X)，它连接正确(每当我输入“cordova运行android”到控制台的时候，app就会打开手机)。

I started off trying to get my current location, and then displaying the coordinates as an alert. This wasn't working, so to try something more simple I added a button that should show an alert pop-up when clicked, but neither are working. This is my current code:

我开始尝试获取当前位置，然后将坐标显示为警报。这是不正常的，所以为了尝试更简单的方法，我添加了一个按钮，当点击它时，它应该显示一个警告弹出窗口，但是它们都不起作用。这是我现在的代码:

www/index.html

www / index . html

    
        
        
        
        
        
        
    
      
        

            
My first Cordova App!
            

                
Connecting to Device
                
Device is ready!
            
            

            

            Click Me!
            
        

        

        
        

    
 

Is there something basic I'm missing? I thought I would be able to code in HTML/Javascript/CSS as normal, but would need to learn some lines of code to integrate the plugins that use native device features (like the geolocation or camera). I've made sure to install the geolocation plugin (using cordova plugin add cordova-plugin-geolocation), but the alert isn't appearing. Do I need a separate plugin to display alerts/interact with the screen?

是否有一些基本的东西我遗漏了?我认为我可以将HTML/Javascript/CSS代码编写为正常，但是需要学习一些代码行来集成使用本机设备特性的插件(比如geolocation或camera)。我已经确保安装了geolocation插件(使用cordova插件添加cordova-plugin-geolocation)，但是警报没有出现。我需要一个单独的插件来显示警报/与屏幕交互吗?

Also, I notice that whenever I test it virtually, if I look at the location in "Extended Controls", the coordinates it gives are:

另外，我注意到，每当我测试它时，如果我看一下“扩展控制”的位置，它给出的坐标是:

Longitude: -122.0840 Latitude: 37.4220 Altitude: 0.0

经度:-122.0840纬度:37.4220海拔:0.0。

Which is Mountain View, CA, about 8,000 miles away from me ¯_(ツ)_/¯

山景城,CA,大约8000英里远离我¯_(ツ)_ /¯吗

Here's a screenshot:

这里有一个截图:

I am testing this locally, does that make a difference? I'd really appreciate any help or advice on this, I'm probably missing something really obvious. Thank you in advance!

我在本地测试，这有什么区别吗?我真的很感激你的帮助和建议，我可能错过了一些很明显的东西。提前谢谢你!

UPDATE 1 The list of installed plugins returned from "cordova plugin ls":

更新1从“cordova插件ls”返回的已安装插件列表:

cordova-plugin-compat 1.0.0 "Compat" cordova-plugin-dialogs 1.3.0 "Notification" cordova-plugin-geolocation 2.4.0 "Geolocation" cordova-plugin-whitelist 1.3.0 "Whitelist"

cordova-plugin-compat 1.0.0“Compat”cordova-plugin- plugin-dialogs 1.3.0“通知”cordova-plugin-geolocation 2.4.0“Geolocation”cordova-plugin- plugin- Whitelist 1.3.0“白名单”

UPDATE 2

更新2

The onSuccess function is supposed to run after the device is ready. When it runs it should show an alert containing location details, but since I was getting the "device ready" message with no alert appearing, I decided to add a button to manually call the function as well.

onSuccess函数应该在设备准备好后运行。当它运行时，它应该显示一个包含位置详细信息的警告，但是由于我正在获取“设备就绪”消息，并且没有出现警报，所以我决定添加一个按钮来手动调用这个函数。

I'm now certain onSuccess is not running correctly when the device is ready, because whenever I click the button to make it run manually the following error shows up in the console:

当设备准备好时，我现在肯定不能正常运行，因为每当我点击按钮使它手动运行时，就会出现以下错误:

Uncaught TypeError: Cannot read property 'coords' of undefined

未被捕获的TypeError:不能读取未定义的属性“coords”。

I'm confused as I'm using the same code as shown here: https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-geolocation/index.html

我很困惑，因为我使用的代码和这里显示的一样:https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-geolocation/index.html。

Also, I've noticed that the index template I'm working off contains , however when I look at the folder containing my index file, there is no cordova.js file, it's not located there, and I can't seem to find it among the cordova download, is this normal or does it need to be downloaded separately?

另外，我注意到我正在工作的索引模板包含，但是当我查看包含索引文件的文件夹时，没有cordova。js文件，它不在那里，我在cordova下载中找不到它，这是正常的还是需要单独下载?

Latest attempt:

最新尝试:

    
        
        
        
        
        
        

        
        
    
      
        

            
My first Cordova App!
            

                
Connecting to Device
                
Device is ready!
            
            

            

            Click Me!
            Run onSuccess function
            
        

        

    

3 个解决方案

if(navigator.geolocation){
  console.log('Geolocation is there');
  navigator.geolocation.getCurrentPosition(function(position) {
    alert('Latitude: '          + position.coords.latitude          + '\n' +
                  'Longitude: '         + position.coords.longitude         + '\n' +
                  'Altitude: '          + position.coords.altitude          + '\n' +
                  'Accuracy: '          + position.coords.accuracy          + '\n' +
                  'Altitude Accuracy: ' + position.coords.altitudeAccuracy  + '\n' +
                  'Heading: '           + position.coords.heading           + '\n' +
                  'Speed: '             + position.coords.speed             + '\n' +
                  'Timestamp: '         + position.timestamp                + '\n');
  } , function(error) {
    console.log('Error while connecting to geolocation ' + error);
  }, {timeout:10000});
} else {
  console.log('Geolocation is not there');
}