Google地图未在Safari 5.1.7中显示

Question

Here is my Link在Chrome，IE和Fire-fox中完美地显示了Map，但Safari版本5.1.7中未显示该地图。任何人都可以帮我解决这个问题。

我的谷歌地图JavaScript

<script>
    function writeAddressName(latLng) {

        var geocoder = new google.maps.Geocoder();
        geocoder.geocode({ "location": latLng },
        function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
            }
            else
                document.getElementById("error").innerHTML += "Unable to retrieve your address" + "<br />";
        });
    }

    function geolocationSuccess(position) {
        var userLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
        document.cookie = "latitude=" + position.coords.latitude;
        document.cookie = "longitude=" + position.coords.longitude;
        // Write the formatted address
        writeAddressName(userLatLng);


        var myOptions = {
            zoom: 16,
            center: userLatLng,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            scrollwheel: false
        };


        // Draw the map
        var mapObject = new google.maps.Map(document.getElementById("map"), myOptions);
        // Place the marker
        new google.maps.Marker({
            map: mapObject,
            position: userLatLng
        });
        // Draw a circle around the user position to have an idea of the current localization accuracy
        var circle = new google.maps.Circle({
            center: userLatLng,
            //radius: position.coords.accuracy,
            map: mapObject,
            //fillColor: '#0000FF',
            fillOpacity: 0.5,
            //strokeColor: '#0000FF',
            strokeOpacity: 1.0
        });
        mapObject.fitBounds(circle.getBounds());
    }

    function geolocationError(positionError) {
        document.getElementById("error").innerHTML + positionError.message + "<br />";
    }

    function geolocateUser() {
        // If the browser supports the Geolocation API
        if (navigator.geolocation) {
            var positionOptions = {
                enableHighAccuracy: true,
                timeout: 10 * 1000 // 10 seconds
            };
            navigator.geolocation.getCurrentPosition(geolocationSuccess, geolocationError, positionOptions);
        }
        else
            document.getElementById("error").innerHTML += "Your browser doesn't support the Geolocation API";
    }

    window.onload = geolocateUser;
</script>

谢谢。

Answer 1

只有在地理定位成功时才会绘制地图，但至少在我看来它在Safari中失败了。

而不是在geolocationSuccess中创建地图，而不是最初使用默认中心创建地图，并在地理位置成功时更新地图的中心。

＆＃13;

＆＃13;

function geolocateUser() {

  //draw the map:
  var myOptions = {
    zoom: 1,
    center: {
      lat: 0,
      lng: 0
    }, //default center at start
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    scrollwheel: false
  };

  // Draw the map
  var mapObject = new google.maps.Map(document.getElementById("map"), myOptions);
  // Place the marker
  mapObject.controls[google.maps.ControlPosition.TOP_CENTER].push(document.getElementById('error'));

  function writeAddressName(latLng) {

    var geocoder = new google.maps.Geocoder();
    geocoder.geocode({
        "location": latLng
      },
      function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          document.getElementById("error")
            .innerHTML = results[0].formatted_address;
        } else
          document.getElementById("error")
          .innerHTML = "Unable to retrieve your address";
      });
  }

  function geolocationSuccess(position) {
    
    var userLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
    new google.maps.Marker({
      map: mapObject,
      position: userLatLng
    });
    // Draw a circle around the user position to have an idea of the current localization accuracy
    var circle = new google.maps.Circle({
      center: userLatLng,
      radius: position.coords.accuracy,
      map: mapObject,
      //fillColor: '#0000FF',
      fillOpacity: 0.5,
      //strokeColor: '#0000FF',
      strokeOpacity: 1.0
    });
    mapObject.fitBounds(circle.getBounds());
    writeAddressName(userLatLng);

  }

  function geolocationError(positionError) {
      var e = {
        1: 'PERMISSION_DENIED',
        2: 'POSITION_UNAVAILABLE',
        3: 'TIMEOUT'
      };
      document.getElementById("error").innerHTML = 'error:' + e[positionError.code];
    }
    // If the browser supports the Geolocation API
  if (navigator.geolocation) {
    var positionOptions = {
      enableHighAccuracy: true,
      timeout: 10 * 1000 // 10 seconds
    };
    navigator.geolocation['getCurrent'+'Position'](geolocationSuccess, geolocationError, positionOptions);
  } else {
    document.getElementById("error").innerHTML = "Your browser doesn't support the Geolocation API";
  }

}

window.onload = geolocateUser;

＆＃13;

html,
      body,
      #map {
        height: 100%;
        margin: 0;
        padding: 0
      }
      #error {
        background: #fff;
        padding: 6px;
      }

＆＃13;

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3"></script>
<div id="error"></div>
<div id="map"></div>

＆＃13;

＆＃13;

＆＃13;