Question

这是我用来构建谷歌地图的代码，这在80％的Android手机中有效，但本地手机制造商不支持此功能，因为我无法在OPPO，HONOR等手机中获得坐标。

我尝试了Google Geolocation API，但没有提供准确的文件。

function inti () {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(geoLocationSucess);



            backview = "views/home.html";
        }

   
}



function writeAddress(latLng) {

    var geocoder = new google.maps.Geocoder();
    geocoder.geocode({
        "location": latLng
    },
        function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {

                var rr = results[0].formatted_address;

                var res = rr.split(",");
                //  alert(res[0] + ", " +res[1]+ "," + res[2]);


            } else
                "Unable to retrieve your address" + "<br />";
        });
}


function initialize() {

    //checker to watch position every sec if position fixed it will not refresh
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(geoLocationSucess, showError);

    } else
        alert("Your Device does't support geolocation.");
}

function geoLocationSucess(position) {

    var userLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

    writeAddress(userLatLng)

    var myOptions = {
        zoom: 15,
        center: userLatLng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var mapObject = new google.maps.Map(document.getElementById("googleMap"), myOptions);

    var marker = new google.maps.Marker({
        map: mapObject,
        position: userLatLng

    });
    var sunCircle = {
        strokeColor: "#7DB1E8",
        strokeOpacity: 0.5,
        strokeWeight: 2,
        fillColor: "#7DB1E8",
        fillOpacity: 0.25,
        map: mapObject,
        center: userLatLng,
        radius: 200 // in meters
    };
    var cityCircle = new google.maps.Circle(sunCircle);
    cityCircle.bindTo(center, marker);




}
function showError(error) {

    switch (error.code) {
        case 1:
            alert("User denied the request for Geolocation.");
            break;
        case 2:
            alert("Location information is unavailable. Please ensure Location is On");
            break;
        case 3:
            break;
        case 4:
            alert("An unknown error occurred.");
            break;
    }
}

<!DOCTYPE html>
<html>
    <style>
        #googleMap {
            width: 100%;
            height: 80vh;
        }
    </style>
  <body>
    <div id="googleMap"> </div> <span id="locate" data-role="touch"><a data-role="button"  onclick="initialize()"
        id="locate" style=" width:50%;background:#18515C;" >Locate Me
    </a></span> <span id="punch" data-role="touch"><a data-role="button"  onclick="punch()"
        id="punch" style="width:40%;background:#18515C; ">Punch
    </a></span>
  <script src="https://maps.googleapis.com/maps/api/js?sensor=true"></script>
  </body>

</html>

Answer 1

试试这个

<p><button onclick="geoFindMe()">Show my location</button></p>
<div id="out"></div>

脚本

function geoFindMe() {
  var output = document.getElementById("out");

  if (!navigator.geolocation){
    output.innerHTML = "<p>Geolocation is not supported by your browser</p>";
    return;
  }

  function success(position) {
    var latitude  = position.coords.latitude;
    var longitude = position.coords.longitude;

    output.innerHTML = '<p>Latitude is ' + latitude + '° <br>Longitude is ' + longitude + '°</p>';

    var img = new Image();
    img.src = "https://maps.googleapis.com/maps/api/staticmap?center=" + latitude + "," + longitude + "&zoom=13&size=300x300&sensor=false";

    output.appendChild(img);
  }

  function error() {
    output.innerHTML = "Unable to retrieve your location";
  }

  output.innerHTML = "<p>Locating…</p>";

  navigator.geolocation.getCurrentPosition(success, error);
}

如果这不起作用，请使用cordova geolocation插件并尝试。

尝试使用地理位置选项。

结果将受以下原因影响，

移动网络套件版本
移动设备的互联网速度
该设备具有清晰且不间断的天空视野。 GPS聆听来自多颗卫星的非常微弱的信号。这些信号可以被建筑物，厚叶子，车顶等部分或完全阻挡。

地理定位html5不适用于Oppo和Honor Android手机

1 个答案: