Question

我正在尝试使用Google API V3创建一个网站，以显示您当前的位置以及附近的餐馆或咖啡馆。我在谷歌的教程上尝试了这个代码，但我不能得到这个api将在地图上显示我当前的位置这是代码：有一个pyrmont，我可以用另一个纬度和经度改变它，但我无法使用navigator.geolocation.getCurrentPosition（）; 感谢

我知道有这个代码：但我不知道如何使用它的get位置......

<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>

Answer 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>

Answer 2

前面的例子中的代码不起作用，我已经修改了一些代码，希望这会有所帮助。

<!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>

iPhone Google Maps API V3用户当前位置和显示餐馆

2 个答案: