问题
Using the Google Map API, how can I set the bus stop icons to be clickable and show the bus number services in an infowindow? I can see in Google Map site, it is enabled. But when I create my own code using the Map API, it seems that this is disabled by default?
If I'm not making myself clear, please see image link.
https://dl.dropbox.com/u/46360728/diff.maps.png
On the left is the map in maps.google.com site while on the right is my implementation of Google Maps. As you can see, I can't click the bus station of my implementation unlike with the other screenshot.
Any help would be much appreciated.
回答1:
For now you can't get it to work. It's an 'acknowledged' bug in gmap's api: https://code.google.com/p/gmaps-api-issues/issues/detail?id=145
You'll notice that in their official transit-layer code demo on the api site, there is also no interactivity: https://developers.google.com/maps/documentation/javascript/examples/layer-transit.
回答2:
You can get bus station name, ID and coordinates, and then get information about bus stop with any other API. Here is code:
var overlay;
overlay = new google.maps.OverlayView();
overlay.draw = function() {};
overlay.setMap(map);
$('#map-canvas').click(function(event){
var point = new google.maps.Point(event.pageX,event.pageY);
var location = overlay.getProjection().fromContainerPixelToLatLng(point); //get map coordinates by click
var request = {
location: location,
types: ['bus_station','subway_station'], //get bus stops and metro stations
radius: 10,
};
placesService = new google.maps.places.PlacesService(map);
placesService.search(request, function(result, status, pagination){
station = result[0];
if(typeof station != 'undefined'){
pos = station.geometry['location']; //position
bus_no = station.name.match(/\[([0-9]+)\]/i)[1]; //get ID by name
alert(bus_no); // ID
}
});
});
来源:https://stackoverflow.com/questions/11920059/enable-bus-stop-icons-clickable-in-google-maps