javascript - 结合使用 Google 路线和 Google 地方信息

Question

我尝试在我的网站上创建一个搜索栏，它将使用两个 Google API。

根据 Google API 文档，我编写了这段代码。

function calcRoute() {
    //Setting variables for Google Places API request   

    var start = 'starting point';
    var end = 'destination point';

    var service;
    var moscow = new google.maps.LatLng(55.749646,37.62368);
    var places = [];

    var request1 = {
        location: moscow,
        radius: '50000',
        query: start
    };

    var request2 = {
        location: moscow,
        radius: '50000',
        query: end
    };

    //Setting variables for Google Directions API

    var directionsDisplay;
    var directionsService = new google.maps.DirectionsService();

    //Executing Google Places request

    service = new google.maps.places.PlacesService();
    service.textSearch(request1, callback1);
    service.textSearch(request2, callback2);

    function callback1(results, status) {
    if (status == google.maps.places.PlacesServiceStatus.OK) {
        places[0] = results[0].formatted_address;
    } else {
        document.getElementById("directionsPanel").innerHTML = "<br/><b>Sorry, directions not found.</b><br/><br/>";
        return;
    }
}

function callback2(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
    places[1] = results[1].formatted_address;

//Executing Google Directions request

    var request = {
    origin:places[0], 
    destination:places[1],
    travelMode: google.maps.DirectionsTravelMode.DRIVING
};

    directionsService.route(request, 


function(response, status) {
         if (status == google.maps.DirectionsStatus.OK) {

var myOptions = {
        zoom: 8,
        streetViewControl: false,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };    
directionsDisplay = new google.maps.DirectionsRenderer();
map = new google.maps.Map(document.getElementById("map_canvas2"), myOptions);
directionsDisplay.setMap(map);

    directionsDisplay.setDirections(response);
    directionsDisplay.setPanel(document.getElementById("directionsPanel"));
  }
  else
  {
  document.getElementById("directionsPanel").innerHTML = "<br/><b>Sorry, directions not found.</b><br/><br/>";
  };
});

 //End of Google Directions request

}
else
{
  document.getElementById("directionsPanel").innerHTML = "<br/><b>Sorry, directions not found.</b><br/><br/>";
  return;
}
}


//Closing calcRoute() function  

}

这是 HTML

<html>
  <head>
    <link href="../images/style.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=places"></script>
    <script src="../scripts/map.js" type="text/javascript"></script>
  </head>
  <body onload="calcRoute();">
    <FORM NAME="joe">
      <INPUT TYPE="hidden" NAME="burns" />
    </FORM>
    <div id="external">
      <div id="wrap">
        <div id="header" align="center"><img src="../images/illustrations/header.gif" alt="Air Moscow" />
        </div>
        <div style="background:#CCDBE3; margin:0px 5px; float:left; width:736px; margin-bottom:10px;">
          <div style="background:#FFF; margin:15px; border:1px #999 solid;">
            <div id="directionsPanel"></div>
            <div style="float:right; width:370px; height:600px; border:2px solid #306B8E; margin:30px 10px 0px 10px;" id="map_canvas2">
            </div>
            <div style="clear:both; margin-bottom:50px;"></div>
          </div>
        </div>
      </div>
      <div id="footer">
      </div>
    </div>
  </body>
</html>

当我测试它时，chrome js 控制台抛出“Uncaught TypeError: Cannot read property 'innerHTML' of undefined”。但是，两个 div 都已定义，并且它们的 id 中没有拼写错误。

我想我需要一个 API 密钥才能让 Google Places 工作。

除此之外，我还需要什么其他东西才能让这段代码正常工作吗？

score 0 · Accepted Answer

这对我有用。我认为这与您初始化事物的方式有关：

<script>
var map;
var places = [];
var service;
var bounds = new google.maps.LatLngBounds();
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var moscow = new google.maps.LatLng(55.749646,37.62368);
var start = 'Kremlin';
var end = 'Hotel Peter';
var request1 = {
        location: moscow,
        radius: '50000',
        query: start
    };

var request2 = {
        location: moscow,
        radius: '50000',
        query: end
    };
function initialize() {
  directionsDisplay = new google.maps.DirectionsRenderer();
  var myOptions = {
        center: moscow,
        zoom: 15,
        streetViewControl: false,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };    
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  directionsDisplay.setMap(map);
  service = new google.maps.places.PlacesService(map);
  directionsService = new google.maps.DirectionsService();
  directionsDisplay.setMap(map);
  calcRoute();
}

function calcRoute() {
   //Executing Google Places request
   service.textSearch(request1, callback1);
}

function callback1(results, status) {
 if (status == google.maps.places.PlacesServiceStatus.OK) {
    places[0] = results[0].geometry.location;
    map.setCenter(places[0]);
    var marker1= new google.maps.Marker({position: places[0], map:map});
    bounds.extend(places[0]);
    service.textSearch(request2, callback2);
  } else {
    document.getElementById("directionsPanel").innerHTML = "<br/><b>Sorry, directions not found.</b><br/>"+start+"<br/>";
    return;
  }
}

function callback2(results, status) {
  if (status == google.maps.places.PlacesServiceStatus.OK) {
    places[1] = results[0].geometry.location;
    bounds.extend(places[1]);
    map.fitBounds(bounds);
    var marker2= new google.maps.Marker({position: places[0], map:map});
    //Executing Google Directions request

    var request = {
      origin:places[0], 
      destination:places[1],
      travelMode: google.maps.DirectionsTravelMode.DRIVING
    };

    directionsService.route(request, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay = new google.maps.DirectionsRenderer();
        directionsDisplay.setMap(map);
        directionsDisplay.setPanel(document.getElementById("directionsPanel"));
        directionsDisplay.setDirections(response);
      }
      else
      {
        document.getElementById("directionsPanel").innerHTML = "<br/><b>Sorry, directions not found.</b><br/><br/>";
      };
    });
    //End of Google Directions request
  }
  else
  {
   document.getElementById("directionsPanel").innerHTML = "<br/><b>Sorry, directions not found.</b><br/>"+end+"<br/>";
   return;
  }
}
google.maps.event.addDomListener(window,'load',initialize);
</script>

工作示例

score 0 · Accepted Answer

最后，我发现了我犯的错误。

第一个错误。

创建服务对象时，我没有传递必要的参数映射。

//Before

service = new google.maps.places.PlacesService();

//After

var myOptions = {
zoom: 8,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};     

map = new google.maps.Map(document.getElementById("map_canvas2"), myOptions);

service =  new google.maps.places.PlacesService(map);

第二个错误。

我在 CalcRoute() 函数中声明了所有变量，从而使其他函数无法访问它们。

所以，我不得不将它们声明为全局变量。

第三个错误。

我一次向 Google Places API 发出了两个请求。这造成了一个错误。

所以，我把第二个请求放在第一个的回调函数中。

这是一个最终的工作示例。

var map

var directionsDisplay;
var directionsService = new google.maps.DirectionsService();


var placesService;

var moscow = new google.maps.LatLng(55.749646,37.62368);
var start;
var end;

var places = [];


function calcRoute() {


start = 'Domodedovo airport';
end = 'Hotel Balchug Kempinsky';

if(start == '' || end == '')
{
document.getElementById("directionsPanel").innerHTML = "<br/><b>Sorry, directions not found.</b>  <br/><br/>";
return;
}

var myOptions = {
zoom: 8,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};     
map = new google.maps.Map(document.getElementById("map_canvas2"), myOptions);

var request1 = {
location: moscow,
radius: '50000',
query: start
};

//Executing Google Places request

placesService =  new google.maps.places.PlacesService(map);
placesService.textSearch(request1, callback1);


}




function callback1(results, status) { 

if (status == google.maps.places.PlacesServiceStatus.OK) {
places[0] = results[0].formatted_address;

var request2 = {
location: moscow,
radius: '50000',
query: end
};    

placesService.textSearch(request2, callback2);
}

else
{
document.getElementById("directionsPanel").innerHTML = "<br/><b>Sorry, directions not found.</b><br/><br/>";
return;
}
}  


function callback2(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
places[1] = results[0].formatted_address;

 //Executing Google Directions request

var request = {
origin:places[0], 
destination:places[1],
travelMode: google.maps.DirectionsTravelMode.DRIVING
};

directionsService.route(request, 


function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {


directionsDisplay = new google.maps.DirectionsRenderer();

directionsDisplay.setMap(map);

directionsDisplay.setDirections(response);
directionsDisplay.setPanel(document.getElementById("directionsPanel"));
}
else
{
document.getElementById("directionsPanel").innerHTML = "<br/><b>Sorry, directions not found.</b><br/><br/>";
};
});

 //End of Google Directions request

}
else
{
  document.getElementById("directionsPanel").innerHTML = "<br/><b>Sorry, directions not found.</b><br/><br/>";
  return;
}
}

javascript - 结合使用 Google 路线和 Google 地方信息

2 回答 2

Related

Reference