在段落中显示用户位置

时间:2014-11-07 03:36:17

标签: javascript jquery google-maps

加载此页面时,系统会提示您是否要让网站使用您当前的地址。我想更改此代码,以便当用户单击“确定”时,地址将发布到正文中的段落标记而不是警报。

怎么会这样呢?

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title>Reverse Geocoding</title> 

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false">      </script> 
<script type="text/javascript"> 
var geocoder;

if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(successFunction, errorFunction);
} 
//Get the latitude and the longitude;
function successFunction(position) {
var lat = position.coords.latitude;
var lng = position.coords.longitude;
codeLatLng(lat, lng)
}

function errorFunction(){
alert("Geocoder failed");
}

function initialize() {
geocoder = new google.maps.Geocoder();



}

function codeLatLng(lat, lng) {

var latlng = new google.maps.LatLng(lat, lng);
geocoder.geocode({'latLng': latlng}, function(results, status) {
  if (status == google.maps.GeocoderStatus.OK) {
  console.log(results)
    if (results[1]) {
     //formatted address
     alert(results[0].formatted_address)
    //find country name
         for (var i=0; i<results[0].address_components.length; i++) {
        for (var b=0;b<results[0].address_components[i].types.length;b++) {

        //there are different types that might hold a city admin_area_lvl_1 usually does in come cases looking for sublocality type will be more appropriate
            if (results[0].address_components[i].types[b] == "administrative_area_level_1") {
                //this is the object you are looking for
                city= results[0].address_components[i];
                break;
            }
        }
    }
    //city data
    alert(city.short_name + " " + city.long_name)


    } else {
      alert("No results found");
    }
  } else {
    alert("Geocoder failed due to: " + status);
  }
});
}
</script> 
</head> 
<body onload="initialize()"> 

</body> 
</html> 

这是我身体部分的内容

<body>
<div>
    <p id="content1"></p>
    <p id="content2"></p>
</div>
</body>

1 个答案:

答案 0 :(得分:0)

你应该把一些元素放在你的身体里,然后写信给他们。

由于您使用的是jquery,您可以使用$("#IDNAME")选择器访问它们,并使用.text(NEWTEXT)函数对它们应用文本更改,并注释掉警报功能,以便它们不会激活。

示例在这里:http://jsfiddle.net/htthzx6a/

<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>Reverse Geocoding</title>

    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false">      </script>
    <script type="text/javascript">
        var geocoder;

        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(successFunction, errorFunction);
        }
        //Get the latitude and the longitude;
        function successFunction(position) {
            var lat = position.coords.latitude;
            var lng = position.coords.longitude;
            codeLatLng(lat, lng)
        }

        function errorFunction() {
            alert("Geocoder failed");
        }

        function initialize() {
            geocoder = new google.maps.Geocoder();



        }

        function codeLatLng(lat, lng) {

            var latlng = new google.maps.LatLng(lat, lng);
            geocoder.geocode({ 'latLng': latlng }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    console.log(results)
                    if (results[1]) {
                        //formatted address
                        alert(results[0].formatted_address)
                        $("#content1").text(results[0].formatted_address);
                        //find country name
                        for (var i = 0; i < results[0].address_components.length; i++) {
                            for (var b = 0; b < results[0].address_components[i].types.length; b++) {

                                //there are different types that might hold a city admin_area_lvl_1 usually does in come cases looking for sublocality type will be more appropriate
                                if (results[0].address_components[i].types[b] == "administrative_area_level_1") {
                                    //this is the object you are looking for
                                    city = results[0].address_components[i];
                                    break;
                                }
                            }
                        }
                        //city data
                        alert(city.short_name + " " + city.long_name)
                        $("#content2").text(city.short_name + " " + city.long_name);


                    } else {
                        $("#content1").text("No results found");
                        alert("No results found");
                    }
                } else {
                    alert("Geocoder failed due to: " + status);
                    $("#content1").text("Geocoder failed due to: " + status);
                }
            });
        }
    </script>
</head>
<body onload="initialize()">
    <div>
        <p id="content1"></p>
        <p id="content2"></p>
    </div>
</body>
</html>