默认为地理位置地图

Geolocation map by default

本文关键字：地图 地理位置 默认      更新时间：2023-09-26

我有一个页面显示客户在地图上的位置，他可以拖动标记更准确，GPS坐标也显示在页面顶部。

问题是，有时由于某些原因无法检测到位置，我如何设置默认位置以防实际位置没有出现。

假设我们想让默认位置为:25.074217,55.510044仅在当前位置未成功加载的情况下

这是代码

<!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>

最简单的方法:将地图初始化为默认位置，然后让地理定位功能在启用时重置位置。

代码片段: 

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>

相关文章：