2011-12-06 44 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>