Geolocation map by default

I have a page show customer location on map and he can drage the marker to be more accurate and the GPS coordinates displayed at the top of page as well.

the question is , in sometimes , the location can not be detected for some reason, how i can set default location just in case the actual location didn't appear.

let's say we want to make the default location is : 25.074217,55.510044 only in case of current location didn't loaded successfully

this is the code

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
  <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script> 
   <br />
    Copy this number and past it in GPS field
   <br />
   <br />
   <input id="divLat" type="text" />
   <br />
   <br />
   <div id="map_canvas" style="width: 600px; height: 600px;"></div>
   <script type="text/javascript">
   var marker;
   function initialize() {
      var lat;
      var lon;
      navigator.geolocation.getCurrentPosition(function (location) {
        lat = location.coords.latitude;
        lon = location.coords.longitude;
        var city = new google.maps.LatLng(lat, lon);
        var mapOptions = {
          zoom: 15,
          center: city,
          mapTypeId:google.maps.MapTypeId.HYBRID
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
        var image = "icon.png";
        marker = new google.maps.Marker({
           position: city,
           map: map,
           draggable: true,
           icon: image
        });
        google.maps.event.addListener(marker, 'position_changed', function (event) {
          update();
        });
        update();
      }, function (positionError) {
        alert("getCurrentPosition failed: " + positionError.message);
      }, { enableHighAccuracy: true });
    };

    google.maps.event.addDomListener(window, "load", initialize);

    function update() {
      var lonlan = marker.getPosition();
      var divLat = document.getElementById ("divLat");
      divLat.value = lonlan.lat ()+","+lonlan.lng ();                                       
    }
    </script>
    <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDfpx62iYkjhpz0J-vu4Zz96vtWE2TFzQs&signed_in=true&callback=initMap"></script>
  </body>
</html>

标签： javascript google-maps gps

1条回答

甜甜的少女心

2楼-- · 2019-09-19 17:32

Simplest thing to do: initialize the map to the default location, then let the geolocation reset the position if it is enabled.

code snippet:

var marker;
var map;
var image = "http://maps.google.com/mapfiles/ms/micons/blue.png";

function initialize() {
  var defaultLocation = new google.maps.LatLng(25.074217, 55.510044);
  var lat;

  var mapOptions = {
    zoom: 15,
    center: defaultLocation,
    mapTypeId: google.maps.MapTypeId.HYBRID
  };
  map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
  marker = new google.maps.Marker({
    position: defaultLocation,
    map: map,
    draggable: true,
    icon: image
  });
  google.maps.event.addListener(marker, 'position_changed',

    function(event) {
      update();
    });
  navigator.geolocation.getCurrentPosition(function(location) {
    lat = location.coords.latitude;
    lon = location.coords.longitude;

    var city = new google.maps.LatLng(lat, lon);
    var mapOptions = {
      zoom: 15,
      center: city,
      mapTypeId: google.maps.MapTypeId.HYBRID
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);


    marker = new google.maps.Marker({
      position: city,
      map: map,
      draggable: true,
      icon: image
    });

    google.maps.event.addListener(marker, 'position_changed',

      function(event) {
        update();
      });

    update();
  }, function(positionError) {
    alert("getCurrentPosition failed: " + positionError.message);
  }, {
    enableHighAccuracy: true
  });
}

google.maps.event.addDomListener(window, "load", initialize);

function update() {
  var lonlan = marker.getPosition();
  var divLat = document.getElementById("divLat");
  divLat.value = lonlan.lat() + "," + lonlan.lng();
}

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<br />Copy this number and past it in GPS field
<br />
<br />
<input id="divLat" type="text" />
<br />
<br />
<div id="map_canvas"></div>

0人赞添加讨论(0) 举报

Geolocation map by default

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间