默认地理位置图答案

【问题标题】：Geolocation map by default默认地理位置图
【发布时间】：2016-01-10 14:40: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>

【问题讨论】：

标签： javascript google-maps gps

【解决方案1】：

最简单的做法：将地图初始化为默认位置，如果启用，则让地理位置重置位置。

代码 sn-p：

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>

【讨论】：