2013-10-25 2 views
4

Google Maps API v3 Geolocation을 사용하여 사용자의 실제 위치를 얻습니다.Google Maps API v3 Google 크롬에서 Geolocation이 작동하지 않습니다.

여기

내 코드 (Google지도 예제의 코드와 동일) : 이것은 구글 크롬 &에 파이어 폭스에서 아니지만 꽤 잘 작동

<head> 
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script> 

<script> 
// Note: This example requires that you consent to location sharing when 
// prompted by your browser. If you see a blank space instead of the map, this 
// is probably because you have denied permission for location sharing. 

var map; 

function initialize() { 
    var mapOptions = { 
    zoom: 6, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    map = new google.maps.Map(document.getElementById('map-canvas'), 
     mapOptions); 

    // Try HTML5 geolocation 
    if(navigator.geolocation) { 
    navigator.geolocation.getCurrentPosition(function(position) { 
     var pos = new google.maps.LatLng(position.coords.latitude, 
             position.coords.longitude); 

     var infowindow = new google.maps.InfoWindow({ 
     map: map, 
     position: pos, 
     content: 'Location found using HTML5.' 
     }); 

     map.setCenter(pos); 
    }, function() { 
     handleNoGeolocation(true); 
    }); 
    } else { 
    // Browser doesn't support Geolocation 
    handleNoGeolocation(false); 
    } 
} 

function handleNoGeolocation(errorFlag) { 
    if (errorFlag) { 
    var content = 'Error: The Geolocation service failed.'; 
    } else { 
    var content = 'Error: Your browser doesn\'t support geolocation.'; 
    } 

    var options = { 
    map: map, 
    position: new google.maps.LatLng(60, 105), 
    content: content 
    }; 

    var infowindow = new google.maps.InfoWindow(options); 
    map.setCenter(options.position); 
} 

google.maps.event.addDomListener(window, 'load', initialize); 
</script> 
</head> 

<body> 
    <div id="container"> 
     <div class="entry-content"> 
      <div class="blogtitle">IT</div><p>&nbsp;</p></td><td> </td><td><p>&nbsp;</p></td></tr></tbody></table><p>&nbsp;</p> 
      <div id="map-canvas"></div><!-- map-canvas end --> 
     </div><!-- entry-content end --> 
    </div><!-- container end --> 
</body> 

나는이 구글 개발자의 게시물을 발견 원정 여행. Chrome & Safari는 웹킷 브라우저이므로 생각합니다. 그러나 나는 그것을 고치는 법을 모른다.

누군가 나를 도울 수 있습니까?

+0

그것의 어떤 비트를 작동하지 않습니다를 찾을 수 있습니다

? 지도가 표시되지 않고 사용자의 위치를 ​​알 수 없으며 자바 스크립트 오류가 발생합니다. – duncan

+0

오류가 발생했습니다 : '오류 : Geolocation 서비스가 실패했습니다 .' 그리고 마커는 러시아 어딘가의 숲에 있습니다 (스위스에 있습니다 ...) – Tyler

답변

2

나는

It appears this is a security restriction for the file protocol. Looks like you are going to need to host it locally from a server.

내가 로컬 서버와 코드를 테스트 한 그것은 잘 작동 this을 발견했다. 희망을 도울 수 있기를 바랍니다.

+0

흠. 고맙습니다. 어떻게 로컬 서버에서 호스팅 할 수 있습니까? 예를 들면? – Tyler

+0

사용중인 OS에 따라 다릅니다. OSX 용 MAMP (http://www.mamp.info/)를 사용하고 있습니다. Windows를 사용하는 경우 XAMP를 체크 아웃하십시오. htdocs 폴더에 html/php/css/whatsoever 파일을 넣고 서버를 시작하십시오. 다음은 MAMP (http://www.mamp.info/en/documentation/faq.html)에 대한 FAQ입니다. – zitscher

+0

당신은 XAMPP입니까? 나는 창문을 사용하고있다. 우리 회사에서는 XAMPP를 사용하지 않습니다. 우리는 IIS를 사용합니다. 이런 식으로 호스트하는 법을 아십니까? – Tyler