HTML5-use geolocation
Please use the getCurrentPosition () method to get the user's location.

in view of the fact that this feature may invade the user's privacy, the user's location information is not available unless the user agrees.

the following example is a simple geolocation example that returns the longitude and latitude of the user's location.

var x=document.getElementById("demo");
function getLocation()
{
  if (navigator.geolocation) {
     navigator.geolocation.getCurrentPosition(showPosition);
  } else {
     x.innerHTML="";
  }
}

function showPosition(position){
  x.innerHTML="Latitude: " + position.coords.latitude +
  "<br />Longitude: " + position.coords.longitude;
}

example explanation:

• detect whether geolocation is supported
• if supported, run the getCurrentPosition () method. If not, a message is displayed to the user.
• if getCurrentPosition () runs successfully, a coordinates object is returned to the function specified in the parameter showPosition
The
• showPosition () function gets and displays longitude and latitude

the above example is a very basic geolocation script with no error handling.

to get ip, you need back-end language to cooperate with
to send a request with ajax. Just return IP from the backend.
or find a API

two free api interfaces that can be used

ip-api
ipapi

1 can obtain the geographic location apigetCurrentPosition () according to h5

2 you can also take advantage of Amap's api free
https://lbs.amap.com/
https://lbs.amap.com/api/java.

the current ip cannot be obtained from the front end alone. You need to use the server to obtain the ip and return it to the front end. Of course, many third-party interfaces can implement