Google会在没有位置的情况下将地图设置为默认位置

Question

I have google maps which work fine when location can be detected, but if it can't, map is never shown. What I want to do is if location can't be detected set lat and lng variable to the one in function locError. How can that be done?

here's my code:

function initializeMap() {
    map = new google.maps.Map(document.getElementById('map_canvas'), {
        zoom: 19,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById('test'));
}
var pinColor = "6495ED";
var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor,
    new google.maps.Size(21, 34),
    new google.maps.Point(0, 0),
    new google.maps.Point(10, 34));
var pinShadow = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_shadow",
    new google.maps.Size(40, 37),
    new google.maps.Point(0, 0),
    new google.maps.Point(12, 35));

function locError(error) {
    // the current position could not be located
    lat = 53.5409298;
    lng = -2.11136590000001;
    initializeMap();
    setCurrentPosition(position);
}

function setCurrentPosition(position) {
    if (position.coords.latitude) {
        lat = position.coords.latitude;
        lng = position.coords.longitude;
    } else {
        lat = 53.5409298;
        lng = -2.11136590000001;
    }
    var accuracy = position.coords.accuracy;
    currentPositionMarker = new google.maps.Marker({
        map: map,
        position: new google.maps.LatLng(
            lat,
            lng
        ),
        title: "Current Position",
        icon: pinImage,
        shadow: pinShadow,
        animation: google.maps.Animation.DROP
    });
    map.panTo(new google.maps.LatLng(
        lat,
        lng
    ));
    circle = new google.maps.Circle({
        map: map,
        radius: accuracy,
              strokeColor: '#E62C56',
              strokeOpacity: 0.8,
              strokeWeight: 2,
              fillColor: '#6495ED',
              fillOpacity: 0.10
    });

    circle.bindTo('center', currentPositionMarker, 'position')
    algolia_search(position);
}

function displayAndWatch(position) {
    // set current position
    setCurrentPosition(position);
    // watch position
    watchCurrentPosition(position);
}

function watchCurrentPosition(position) {
    var positionTimer = navigator.geolocation.watchPosition(
        function (position) {
            setMarkerPosition(
                currentPositionMarker,
                position,
            )
        });
}

function setMarkerPosition(marker, position) {
    circle.setRadius(position.coords.accuracy);
    marker.setPosition(
        new google.maps.LatLng(
            lat,
            lng)
    );
    algolia_search(position);
}

function initLocationProcedure() {
    initializeMap();
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(displayAndWatch, locError);
    } else {
        displayAndWatch();
        locError();
    }
}

function clearOverlays() {
    for (var i = 0; i < markers.length; i++) {
        markers[i].setMap(null);
    }
    markers.length = 0;
}
$(document).ready(function () {
    initLocationProcedure();
});

What is causing an issue of the map not being loaded at all when location is off? How can I still load the map and bind it to lat and lng set in error function which is being triggered when location is not found

Answer 1

I think you need to try like that if there there is no location in your loop or etc.

function initializeMap() {
          map = new google.maps.Map(document.getElementById('map'), {
            zoom: 19,
            center: new google.maps.LatLng(53.5409298,-2.11136590000001),
            mapTypeId: google.maps.MapTypeId.ROADMAP
          });

          var lat = 53.5409298;
            var lng = -2.11136590000001;
            var title = "Test" +" "+"Set";
            var latLng = new google.maps.LatLng(lat,lng);
            var marker = new google.maps.Marker({
                zoom: 12,
                position: latLng,
                map: map,
                title: title
              });

        }

I observed one thing more is that you did not give the center position in your map, so may be it will produce error.

center: new google.maps.LatLng(53.5409298,-2.11136590000001),

Thanks