Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
313 views
in Technique[技术] by (71.8m points)

javascript - Why Geolocation HTML5 getCurrentPosition() is not working on Google Map?

This is the error that I am getting while running below javascript file

getCurrentPosition() and watchPosition() no longer work on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https for more details.

This is my javascript file

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>   
<script
  src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA4HSRrQSje--aI6ImtJF30s5ezaUWxsow&libraries=places"></script>

<script>
function getLocation()
    {
      console.log("In geolocation");
        if (navigator.geolocation)
        {
        navigator.geolocation.getCurrentPosition(showPosition);
        }
       else
       {
        print("Browser doesn't support geolocation");
       }

 function showPosition(position)
    {
        console.log("in show position");
        dest_lat=position.coords.latitude;
        dest_long=position.coords.longitude;

        url = 'https://maps.googleapis.com/maps/api/geocode/json?latlng='+ dest_lat + ',' + dest_long + '&sensor=false';
         $.get(url, function(data)
          {
                  if (data.status == 'OK')
                   {
                      map.setCenter(data.results[0].geometry.location);                
                          console.log("Dragaed lat "+marker.getPosition().lat());
                          console.log("Dragged lng "+marker.getPosition().lng());
                          console.log("Address "+data.results[0].formatted_address);
                   }
              });
    }
</script>
</head>
<body>
<input type="button" value="LocateMe" onclick="getLocation();"/>
</body>
</html>
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

You have to put it one a server with https://!

If you are using Visual Studio, you can configure to lunch the site with https:// see: https://dotnetcodr.com/2015/09/18/how-to-enable-ssl-for-a-net-project-in-visual-studio/ Alternativelyyou can test it on jsfiddler, which uses https per default.

Besides that your code has a lot of other errors.

  • Brackets don't match
  • map object is not defined in your example
  • varibles are not declared (they are added to the global namespace which can cause some really nasty problems later on and throws an error when you use "use strict")

Here is a working excample on jsfiddle: https://jsfiddle.net/3gkkvs50/ (stackoverflow doesn't use https for the examples)

HTML:

<input type="button" value="LocateMe" onclick="getLocation();" />

JS:

function getLocation() {
  console.log("In geolocation");
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
  } else {
    print("Browser doesn't support geolocation");
  }
}

function showPosition(position) {
  console.log("in show position");
  var dest_lat = position.coords.latitude;
  var dest_long = position.coords.longitude;

  var url = 'https://maps.googleapis.com/maps/api/geocode/json?latlng=' + dest_lat + ',' + dest_long + '&sensor=false';
  $.get(url, function(data) {
    alert(JSON.stringify(data));
  });
}

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...