未捕获到的TypeError：无法读取Google Map API中未定义的属性“ PlacesService”

Question

   doctype html
        html
          head
            title= title
            link(rel='stylesheet', href='/stylesheets/style.css')
          body
            script(src='/javascripts/jquery.min.js')
            script(src='http://maps.google.com/maps/api/js?key=AIzaSyD6MCxtDJOnbE1T6Y09k8Uca1rXHTQ3Bqg&v=3.exp&sensor=true&libraries=place‌​s')
            script(src='/javascripts/global.js')
            h1= title
            #loading
              p Loading your location
            br
            #map

            input#my-address(type='text')
        button#getCords(onclick='codeAddress();') getLat&Long

我在jade模板中编写了上面的代码以显示地图，即“ index.jade”，随后的文件即“ global.js”是脚本文件

 //Calling the locateme function when the document finishes loading
 $(document).ready(function() {
    locateMe();
});

//Function to locate the user
var locateMe = function(){
    var map_element= $('#map');
    if (navigator.geolocation) {
       var position= navigator.geolocation.getCurrentPosition(loadMap);
    } else {
      map_element.innerHTML = "Geolocation is not supported by this browser.";
    }
};

//Lets load the mop using the position
var loadMap = function(position) {
  var loading= $('#loading');
  var latitude=position.coords.latitude;
  var longitude=position.coords.longitude;
  var myLatlng = new google.maps.LatLng(latitude, longitude);
        //Initializing the options for the map
        var myOptions = {
         center: myLatlng,
         zoom: 15,
         mapTypeId: google.maps.MapTypeId.ROADMAP,
      };
        //Creating the map in teh DOM
      var map_element=document.getElementById("map");
      var map = new google.maps.Map(map_element,myOptions);
        //Adding markers to it
      var marker = new google.maps.Marker({
          position: myLatlng,
          map: map,
          title: 'You are here'
      });
        //Adding the Marker content to it
      var infowindow = new google.maps.InfoWindow({
          content: "<h2>You are here:</h2>",
            //Settingup the maxwidth
          maxWidth: 300
      });
        //Event listener to trigger the marker content
      google.maps.event.addListener(marker, 'click', function() {
          infowindow.open(map,marker);});
};

//get lat and log 
function codeAddress() {
  alert('inside')
    geocoder = new google.maps.Geocoder();
    var address = document.getElementById("my-address").value;
    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
      var lat=results[0].geometry.location.lat();
      var lng=results[0].geometry.location.lng();
      var pyrmont={lat:lat,lng:lng};
     var lat=results[0].geometry.location.lat();
      var lng=results[0].geometry.location.lng();
      var pyrmont={lat:lat,lng:lng};

      var map = new google.maps.Map(document.getElementById("my-address"),{
        center:pyrmont,
        zoom:15
      });

      //Adding the Marker content to it
      var infowindow = new google.maps.InfoWindow();
      alert(infowindow);
      var service = new google.maps.places.PlacesService(map);
        service.nearbySearch({
          location: pyrmont,
          radius: 500,
          type: ['store']
        }, 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);
        });
    };

       } else {
        alert("Geocode was not successful for the following reason: " + status);
      }
    });
  }

未捕获到的TypeError：无法读取Google Map API中未定义的属性“ PlacesService”

Answer 1

您正在进行位置搜索，但不会返回您正在使用的所有字段： http : //code.google.com/apis/maps/documentation/javascript/places.html#place_search_responses

为了获取地址，网站等，您还需要调用place.getDetails（），并传递Place的reference 。

以下是如何获取地方信息的示例代码片段：

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

var request = { reference: place.reference };
service.getDetails(request, function(details, status) {
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(details.name + "<br />" + details.formatted_address +"<br />" + details.website + "<br />" + details.rating + "<br />" + details.formatted_phone_number);
infowindow.open(map, this);
});
});
}