Safari 5.1.7中未显示Google Map

Question

这是我的链接 ，该链接在Chrome，IE和Fire-fox中完美显示了地图，但在Safari版本5.1.7中未显示该地图。 谁能帮我解决这个问题。

我的Google Maps 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创建地图，而是先使用默认中心创建地图，然后在地理位置成功后更新地图的中心。

 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; 

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

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