Google Places API - 添加地点详细信息

时间:2013-01-09 01:09:23

标签: google-maps google-maps-api-3 google-places-api

我有以下代码:

     function getLocation()
                {
                if (navigator.geolocation)
                  {
                  navigator.geolocation.getCurrentPosition(start,showError);

                  }
                else{
                error('Geo Location is not supported');
                }
                }

 function start(position) {

                var mySearch = document.getElementById("search").value;           
               var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

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

                var request = {
                  location: latlng,
                  radius: 500,
                  query: mySearch
                };

                 infowindow = new google.maps.InfoWindow();
                 service = new google.maps.places.PlacesService(map);
                 service.textSearch(request, callback);
                }

                function callback(results, status) {

                  if (status == google.maps.places.PlacesServiceStatus.OK) {
                    for (var i = 0; i < results.length; i++) {
                      var place = results[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, place.website);
                  infowindow.open(map, this);
                });
              } 

代码工作正常,但我正在尝试检索有关某个地方的更多详细信息。我知道有关地方的详细信息:https://developers.google.com/maps/documentation/javascript/places#place_details我只是不确定在哪里以及如何调整我的代码以便在地方网站中添加。我正在努力找出在哪里获得参考,然后如何使用它。如果有人可以在我的代码中写出它会很棒。

1 个答案:

答案 0 :(得分:1)

调整后的“createMarker”功能(未测试):

function createMarker(place) {
    var placeLoc = place.geometry.location;
    if (place.icon) {
      var image = new google.maps.MarkerImage(
            place.icon, new google.maps.Size(71, 71),
            new google.maps.Point(0, 0), new google.maps.Point(17, 34),
            new google.maps.Size(25, 25));
    } else var image = null;

    var marker = new google.maps.Marker({
      map: map,
      icon: image,
      position: place.geometry.location
    });
    var request =  {
      reference: place.reference
    };

    google.maps.event.addListener(marker,'click',function(){
        service.getDetails(request, function(place, status) {
          if (status == google.maps.places.PlacesServiceStatus.OK) {
            var contentStr = '<h5>'+place.name+'</h5><p>'+place.formatted_address;
            if (!!place.formatted_phone_number) contentStr += '<br>'+place.formatted_phone_number;
            if (!!place.website) contentStr += '<br><a target="_blank" href="'+place.website+'">'+place.website+'</a>';
            contentStr += '<br>'+place.types+'</p>';
            infowindow.setContent(contentStr);
            infowindow.open(map,marker);
          } else { 
            var contentStr = "<h5>No Result, status="+status+"</h5>";
            infowindow.setContent(contentStr);
            infowindow.open(map,marker);
          }
        });
    });
}

working example