Google지도 자바 스크립트 API + HTML5 geolocation 기발한

Question

Google지도 자바 스크립트 API 및 HTML5 geolocation에 약간 이상한 문제가 있습니다.

나는 다음과 같은 실행 온로드가 : 이제

var geocoder; 
    var map; 
    var latlng; 
    function initialize() { 
if(navigator.geolocation){ 
    navigator.geolocation.getCurrentPosition(function(position){ 
    latlng = new google.maps.LatLng(position.coords.latitude,position.coords.longitude); 
    }); 
}else{ 
    latlng = new google.maps.LatLng(geoip_latitude(),geoip_longitude()); 
} 

geocoder = new google.maps.Geocoder(); 
var myOptions = { 
    zoom: 8, 
    center: latlng, 
    streetViewControl: false, 
    mapTypeId: google.maps.MapTypeId.HYBRID 
}; 
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
    google.maps.event.addListener(map, 'click', function(event) { 
    placeMarker(event.latLng); 
    var latLong = String(event.latLng).replace('(', ''); 
    latLong = latLong.replace(')', ''); 
    $('#latlng').attr('value', latLong); 
    }); 

    function placeMarker(location) { 
    if(undefined != initialize.marker){ 
    initialize.marker.setMap(null); 
    } 
    initialize.marker = new google.maps.Marker({ 
    position: location, 
    map: map 
    }); 
    initialize.marker.setMap(map); 
    map.setCenter(location); 
} 
    } 

, 브라우저가 위치 정보를 지원하는 경우이 이이며, 위도 + 긴 얻을지도를 작성하고 중심으로지도를 표시해야 할 일을 위도 + 경도.

내가 geoip_ 기능 (maxmind)를 사용하지만 위치 정보가 이상한 문제가있는 경우 그것은 잘 작동

:

코드가 같이 실행되는 경우를, 구글지도 표시가없는 회색 상자로 표시됩니다 지도 및 컨트롤 없음.

경고를 추가하는 경우(); 직후에

if(navigator.geolocation){ 
    navigator.geolocation.getCurrentPosition(function(position){ 
     latlng = new google.maps.LatLng(position.coords.latitude,position.coords.longitude); 
    }); 
}else{ 
    latlng = new google.maps.LatLng(geoip_latitude(),geoip_longitude()); 
} 

지도가 잘 표시됩니다.

그게 뭐야?

Answer 1

W3C Geolocation API는 비동기입니다. 성공 콜백 함수 (변수 latlng 설정)는 즉시 호출되지 않습니다. 브라우저는 실제로 geolocating을 수행하는 데 약간의 시간이 필요합니다. 실제로 사용자가 개인 정보 보호 메시지를 읽고 승인 여부를 결정하는 데 약간의 시간이 걸리면이 프로세스에 많은 시간이 걸릴 수 있습니다. 그 동안에지도가 즉시로드됩니다.

경고는 브라우저가 Geolocation 프로세스를 완료하고지도를로드하는 코드로 이동하기 전에 콜백을 호출 할 수있는 시간을 브라우저에 제공하기 때문에 이후에 경고와 함께 작동하는 것으로 나타났습니다. (잠깐 기다리는 것만으로도 좋은 해결책은 아닙니다. 일부 사용자와 브라우저는 위치를 표시하기 전에 시간이 오래 걸립니다.)

해결 방법 : 맵을 생성하는 함수를 호출하십시오. geolocation 호출 후 실질적으로 모든 것을 캡슐화) getCurrentPosition 및 geoip else 분기의 성공 콜백에서 호출하십시오. 그렇게하면 latlng 변수가 적절히 채워질 수 있다는 것을 보장 한 후에 만지도를로드하려고 시도합니다.

Answer 2

오늘 아침 처음으로이 혼란을 겪었습니다. 솔직히 말해서지도 API에는이 문제를 해결할 수있는 기능이 없습니다. 다음은 내 솔루션입니다. JSFIddle