2011-12-06 3 views
0

Google API V3를 사용하여 현재 위치와 인근 레스토랑 또는 카페를 표시하는 웹 사이트를 만들려고합니다. Google의 튜토리얼에서이 코드를 시도했지만 이 API는지도상의 현재 위치를 보여줍니다. 여기 코드는 입니다. pyrmont가 있는데 다른 위도와 경도로 변경할 수는 있지만 navigator.geolocation.getCurrentPosition(); ...iPhone Google지도 API V3 사용자 현재 위치 및 쇼 레스토랑

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true&libraries=places"></script> 

<script type="text/javascript"> 
    var map; 
    var infowindow; 

if (navigator.geolocation) { 
     navigator.geolocation.getCurrentPosition(success, error); 
    } else { 
     alert('geolocation not supported'); 
    } 

    function success(position) { 
     alert(position.coords.latitude + ', ' + position.coords.longitude); 
    } 

    function error(msg) { 
     alert('error: ' + msg); 
    } 

    function initialize() { 
    var pyrmont = new google.maps.LatLng(48.195201,16.369547); 

    map = new google.maps.Map(document.getElementById('map'), { 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     center: pyrmont, 
     zoom: 15 
    }); 

    var request = { 
     location: pyrmont, 
     radius: 500, 
     types: ['cafe'] 
    }; 
    infowindow = new google.maps.InfoWindow(); 
    var service = new google.maps.places.PlacesService(map); 
    service.search(request, callback); 
    } 

    function callback(results, status) { 
    if (status == google.maps.places.PlacesServiceStatus.OK) { 
     for (var i = 0; i < results.length; i++) { 
     createMarker(results[i]); 
     } 
    } 
    } 

    function createMarker(place) { 
    var placeLoc = place.geometry.location; 
    var marker = new google.maps.Marker({ 
     map: map, 
     position: place.geometry.location 
    }); 

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

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

답변

1

EDITED을하지만 난 그것을 밖으로 가져 오기 위치를 사용하는 방법을 잘 모릅니다 : 감사

나는이 코드가 알고있다.

그래서 검색 기능이 제 실제 위치에 제로 결과를 반환 했으므로 원래 위치에 더 가깝게 실제 위치를 오프셋 할 때 (사용자의 쿼리와 일치하는 결과의 밀도를 알지 못하기 때문에) 그것이 저에게 효과적입니다 . , 당신은 일을 볼 수있는 6.6와 89.45을 편집해야합니다,하지만 당신이 작동하지 않습니다 위의 예에서

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<style> 
#map_canvas{width:500px;height:500px;} 
</style> 
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true&libraries=places"></script> 
<script type="text/javascript"> 
    var map; 
    var infowindow; 

    function initialize(position) { 
    //var pyrmont = new google.maps.LatLng(48.195201,16.369547); 
    var pyrmont = new google.maps.LatLng(position.coords.latitude+6.6,position.coords.longitude+89.45); 
    map = new google.maps.Map(document.getElementById('map_canvas'), { 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     center: pyrmont, 
     zoom: 15 
    }); 
    var a = new google.maps.Marker({position: pyrmont,map: map,icon:'http://www.blind-summit.co.uk/wp-content/plugins/google-map/images/marker_blue.png'}); 
    var request = { 
     location: pyrmont, 
     radius: 500, 
     types: ['cafe'] 
    }; 
    infowindow = new google.maps.InfoWindow(); 
    var service = new google.maps.places.PlacesService(map); 
    service.search(request, callback); 
    } 

    function callback(results, status) { 
    if (status == google.maps.places.PlacesServiceStatus.OK) { 
     for (var i = 0; i < results.length; i++) { 
     createMarker(results[i]); 
     } 
    } 
    if (status == google.maps.places.PlacesServiceStatus.ZERO_RESULTS){ 
    alert('zero results near this location'); 
    } 
    } 

    function createMarker(place) { 
    var placeLoc = place.geometry.location; 
    var marker = new google.maps.Marker({ 
     map: map, 
     position: place.geometry.location 
    }); 

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

    google.maps.event.addDomListener(window, 'load', function(){ 
     navigator.geolocation.getCurrentPosition(initialize); 
    }); 
</script> 
</head> 
<body> 
<div id="map_canvas"></div> 
</body> 
</html> 
+0

그래서이 행은 어떻게됩니까? var pyrmont = new google.maps.LatLng (48.195201,16.369547); – xmux

+0

이 pyrmont를 변경하지 않으면 작동하지 않습니다. 여전히 동일한 위치 만 보여줍니다 .. 어딘가에 .. – xmux

+0

실행하면 검색 결과와 위치가 표시됩니다. 사용자 위치 주변을 검색하겠습니까? –

0

코드 유용하고 싶다면 당신은 검색 자체에 뭔가를해야합니다 약간의 변경으로 코드를 수정했습니다. 이것이 도움이되기를 바랍니다.

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
    <title>Google Maps</title> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
    <script src="http://maps.google.com/maps/api/js?libraries=places&region=uk&language=en&sensor=true"></script> 
    <!--<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>--> 
</head> 
<body> 

    <div id="map" style="width: 1200px; height: 600px;"></div> 
    <script type="text/javascript"> 
     var map = new google.maps.Map(document.getElementById('map'), { 
      zoom: 15, 
      center: new google.maps.LatLng(51.5121, -0.1043), 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }); 

     google.maps.event.addListener(map, 'click', function(myEvent) 
     { 
      getPOI(myEvent.latLng); 
     }); 


     function getPOI(latLng) 
     { 
      var request = { 
       location: latLng, 
       radius: 500, 
       types: ['cafe'] 
      }; 
      infowindow = new google.maps.InfoWindow(); 
      var service = new google.maps.places.PlacesService(map); 
      service.search(request, callback); 
     } 

     function callback(results, status) { 
      console.log(results); 
      if (status == google.maps.places.PlacesServiceStatus.OK) { 
       for (var i = 0; i < results.length; i++) { 
        createMarker(results[i]); 
       } 
      } 
      if (status == google.maps.places.PlacesServiceStatus.ZERO_RESULTS){ 
       alert('zero results near this location'); 
      } 
     } 

     function createMarker(place) { 
      //var placeLoc = place.geometry.location; 
      var marker = new google.maps.Marker({ 
          //icon: place.icon, 
          map: map, 
          position: place.geometry.location, 
          title: place.name 
         }); 

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

    </script> 
</body> 
</html>