Question

我是新手，所以提前感谢您的帮助。我正在设置一个简单的地理定位页面。目前，当我单击按钮时，警告弹出框会指出地理位置设置。

问题 - 我不需要在框中弹出结果，而是需要在页面本身上显示地理位置信息。

我被告知我需要使用appendTo元素，并且我尝试了许多不同的方法，但没有任何反应。

这是当前的脚本：

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Geolocation</title>

    <script
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.       
    js"</script>    

    <section>
    <script>
    $(document).ready(function() {
    $('#startGeo').click(checkLocation);

    function checkLocation() {

    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(getLocation, 
        locationFail);
    }
    else  {
        document.write('You do not have geolocation');
    }

    } 

    function getLocation(position) {
        var latitude = position.coords.latitute;
        var longitude = position.coords.longitude;
        var accuracy = position.coords.accuracy;
        var timestamp = position.coords.timestamp;


    alert('latitude: ' + latitude + 'longitude: ' + longitude + 
    'accuracy: ' + accuracy + 'timestamp: ' + timestamp);

    }

    function locationFail() {
    document.write('We did not get your location. Please check your  
    settings.')
    }

    });


    </script>

    </head>

    <body>

    <button id="startGeo">Click here to check your geolocation 
    abilities</button>

    </body>
    </html>

Answer 1

这是一种使用append的简单方法，它与appendTo非常相似，只是使用不同的语法：

$('body').append('latitude: ' + latitude + 'longitude: ' + longitude + 'accuracy: ' + accuracy + 'timestamp: ' + timestamp);

Answer 2

在html中创建一个容器

$('<div>latitude: ' + latitude + ' longitude: ' + longitude + 
' accuracy: ' + accuracy + ' timestamp: ' + timestamp + '</div>')
  .appendTo($('#geoDisplay'));

然后创建一个包含地理位置的元素并将其附加到新容器。

confPoints.setInt("hbase.rpc.timeout",6000000)
...
scanPoints.setBatch(1000)

现在，每次单击该按钮，它都会附加一个包含地理定位信息的div。

Answer 3

在您的文档中插入<p class="data"></p>

<强>替换

alert('latitude: ' + latitude + 'longitude: ' + longitude + 
    'accuracy: ' + accuracy + 'timestamp: ' + timestamp);

    }

。通过

$('.data').html('latitude: ' + latitude + 'longitude: ' + longitude + 'accuracy: ' + accuracy + 'timestamp: ' + timestamp); }

Answer 4

您需要创建一个元素并将其添加到DOM中。例如：

var coordlabel = '<label>latitude: ' + latitude + 'longitude: ' + longitude + 
'accuracy: ' + accuracy + 'timestamp: ' + timestamp + '</label>';
$('body').append(coordlabel);

Answer 5

我假设你问的是如何得到你的字符串：

'latitude: ' + latitude + 'longitude: ' + longitude + 'accuracy: ' + accuracy + 'timestamp: ' + timestamp

在DOM上的现有节点内。

如果是这种情况，请阅读本文中的其余信息，因为您需要了解一些事项。

DOM 代表文档对象模型。
节点是您的html元素，可以通过Javascript使用选择器进行操作。例。 JQUERY：$('#element')是一个节点选择器。

如果您想使用Jquery输出由javascript生成的字符串，那么您可以这样做：

var str = 'latitude: ' + latitude + 'longitude: ' + longitude + 'accuracy: ' + accuracy + 'timestamp: ' + timestamp;
$('#element').text(str);

http://jsfiddle.net/amLtprmt/

这不会附加节点，我不相信这是你想要做的。

要在本机JavaScript中执行此操作，您可以执行以下操作：

var node = document.getElementById('element');
var str = 'latitude: ' + latitude + 'longitude: ' + longitude + 'accuracy: '       + accuracy + 'timestamp: ' + timestamp;
node.innerHTML = '';
node.appendChild(document.createTextNode(str));

http://jsfiddle.net/56tp7te1/

这假设您的html看起来类似于：

<html>
<body>
<div id='element'></div>
</body>
</html>

如何使用appendTo而不是在警告框中显示信息？

5 个答案: