2011-12-06 73 views
0

我想使用谷歌API V3來顯示您的當前位置和附近的餐館或咖啡館的網站.. 我試過這個代碼在谷歌的教程,但我不能得到這個api會顯示我在地圖上的當前位置 這裏是代碼: 有一個pyrmont,我可以改變它與另一個經度和緯度,但我不能使它與navigator.geolocation.getCurrentPosition()有用; 感謝iPhone谷歌地圖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

編輯。

因此,搜索功能在我的實際位置上返回零結果,所以當我偏移我的實際位置以更接近您的原始位置(因爲我不知道匹配您的查詢的結果密度)對我而言。你必須編輯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,它仍然只顯示相同的位置..不somewhereelse .. – 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>