내 스크립트에서 google getLocation 함수가 작동하지 않습니다.

Question

안녕하세요. 내 사이트에서 마커 (내 상점 위치 사용)와 같은 내 사이트에 Google지도를 표시하고 사용자 위치를 중심으로 표시해야합니다. 시도해 본다 :

<script> 
     var myCenter = new google.maps.LatLng('xxx'); 
     var userCenter; 

      function getLocation() { 
       if (navigator.geolocation) { 
        navigator.geolocation.getCurrentPosition(showPosition); 
       } 
      } 

      function showPosition(position) { 
       var latlon = position.coords.latitude + "," + position.coords.longitude; 
       userCenter=new google.maps.LatLng(latlon); 
      } 

     var marker; 

     function initialize() 
     { 
      var mapProp = { 
       center: userCenter, 
       zoom:15, 
       mapTypeId:google.maps.MapTypeId.ROADMAP 
       }; 

      var map=new google.maps.Map(document.getElementById("googleMap"),mapProp); 

      marker=new google.maps.Marker({ 
       position:myCenter, 
       }); 

      marker.setMap(map); 

      var infowindow = new google.maps.InfoWindow({ 
       content:"Casa" 
      }); 

      google.maps.event.addListener(marker, 'click', function() { 
       infowindow.open(map,marker); 
      }); 
     }      

     google.maps.event.addDomListener(window, 'load', initialize); 

    </script> 

사용자 센터를 사용하지 않고지도가 작동하는 MyCenter를 사용하고 MyCenter의 가운데에 표시하면 이것을 시도해보십시오.

Answer 1

문제는 함수의 실행 순서입니다. userCenter를 사용하기 전에 userCenter를 사용하려고합니다. 그러면 오류가 발생하고 (var mapProp = {center : userCenter, ...}) 초기화 작업이 중지됩니다.

그런데 getLocation()을 절대로 호출하지 마십시오. 오직 정의 된 함수는 아무것도하지 않습니다. 함수는 어딘가에 호출하면 무언가를 수행합니다.

(기준 방법 2 : navigator.geolocation는 구글 서비스가 아니며 그것은 웹 브라우저가 제공하는 서비스입니다.)

내가 코드

<script src="http://maps.googleapis.com/maps/api/js?sensor=true"></script> 
<script> 
    var myCenter = new google.maps.LatLng(50.845463, 4.357112); 
    var userCenter; 
    var marker; 
    var map; 

    // sends a request to get the location of the user. 
    // Notice: you will have to wait for the callback (= showPosition) before you have the result of this request. 
    // So you cannot rely only on userCenter. You must use myCenter, until you are sure that showPosition receives the response 
    function getUserLocation() { 
     if (navigator.geolocation) { 
     navigator.geolocation.getCurrentPosition(showPosition); 
     } 
    } 

    // Response of getUserLocation(). The location of the client is known. 
    // Notice: by this time initialize() has been called. initialize() doesn't know anything about userCenter. 
    // userCenter will only get a value when this function is called. 
    function showPosition(position) { 
     userCenter = new google.maps.LatLng(
     position.coords.latitude, 
     position.coords.longitude 
    ); 
     // Now we know the position of the client. We can set the center of the map to this location 
     map.setCenter(userCenter); 
    } 

    // this function initializes Google maps. It is triggered the moment the DOM of the web page is loaded. 
    function initialize() { 
     // let's start the request to get the position of the user 
     getUserLocation(); 

     var mapProp = { 
     center: myCenter, // notice: userCenter is still undefined, you cannot use it yet. 
     zoom:15, 
     mapTypeId:google.maps.MapTypeId.ROADMAP 
     }; 
     map = new google.maps.Map(document.getElementById("googleMap"), mapProp); 
     marker = new google.maps.Marker({ 
     position: myCenter, 
     map: map // this replaces marker.setMap(map); 
     }); 

     var infowindow = new google.maps.InfoWindow({ 
     content: "Casa" 
     }); 
     // a click on the marker opens the infoWindow 
     google.maps.event.addListener(marker, 'click', function() { 
     infowindow.open(map, marker); 
     }); 
    } 
    google.maps.event.addDomListener(window, 'load', initialize); 
</script> 

에 추가 코멘트를 넣어