我正在开展一个项目,根据用户输入地址显示附近的咖啡店列表。在单独的脚本中,我可以获取文本地址,以便在地图上显示lat / lon和google地点,但是当我尝试将它们组合时,文本地址中的lat / lon不会传递到google地方。我还在学习javascript,所以我不知道它是不是异步还是什么。我已经阅读了大量的SO问题和API文档,但我无法弄明白。谢谢!
这是我提交的表格:
<div id="search">
<input id="searchaddress" type="textbox" value="Where are you?">
<input type="button" value="Caffinate" onclick="initialize()">
</div>
<div id="map"></div>
<div id="result-list"></div>
这是我的JavaScript:
var map;
var infowindow;
var centralLocation = null;
var side_bar_html = "<table border='1'>";
var gmarkers = [];
var address = null;
var lat = null;
var lng = null;
var service = null;
var bounds = null;
function initialize() {
centralLocation = new google.maps.LatLng(38.907, -77.036);
var request = {
location: centralLocation,
keyword: ['coffee'],
types: ["cafe", "restaurant", "bakery"],
rankBy: google.maps.places.RankBy.DISTANCE
};
infowindow = new google.maps.InfoWindow();
bounds = new google.maps.LatLngBounds();
map = new google.maps.Map(document.getElementById('map'), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 15
});
service = new google.maps.places.PlacesService(map);
var query = location.search.substring(1);
var pairs = query.split("&");
for (var i=0; i<pairs.length; i++) {
var pos = pairs[i].indexOf("=");
var argname = pairs[i].substring(0,pos).toLowerCase();
var value = pairs[i].substring(pos+1).toLowerCase();
if (argname == "lat") {lat = parseFloat(value);}
if (argname == "lng") {lng = parseFloat(value);}
if (argname == "address") {
address = unescape(value)
geocoder = new google.maps.Geocoder();
var searchaddress = document.getElementById('searchaddress').value;
console.log(searchaddress);
geocoder.geocode({"searchaddress": address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
centralLocation = results[0].geometry.location;
map.setCenter(centralLocation);
map.fitBounds(results[0].geometry.viewport);
if (!service) service = new google.maps.places.PlacesService(map);
request.location = centralLocation;
service.search(request, callback);
} else {
alert("address "+address+ " not found");
}
});
}
}
if (lat && !isNaN(lat) && lng && !isNaN(lng)) {
centralLocation = new google.maps.LatLng(lat, lng);
map.setCenter(centralLocation);
request.location = centralLocation;
if (!service) service = new google.maps.places.PlacesService(map);
service.search(request, callback);
} else {
if (!service) service = new google.maps.places.PlacesService(map);
if (!address) service.search(request, callback);
}
}
function callback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < 10; i++) {
createMarker(results[i]);
}
side_bar_html += "</table>";
document.getElementById('result-list').innerHTML = side_bar_html;
}
}
function createMarker(place) {
var placeLoc = place.geometry.location;
var marker = new google.maps.Marker({
map: map,
// icon: place.icon,
position: place.geometry.location
});
bounds.extend(place.geometry.location);
gmarkers.push(marker);
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(place.name+"<br>"+place.vicinity);
infowindow.open(map, this);
});
side_bar_html += "<tr><th align='left'><a href='javascript:google.maps.event.trigger(gmarkers["+(gmarkers.length-1)+"],\"click\");'>" + place.name + "</a></th><td>" + place.vicinity + "</td></tr>";
map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, 'load', initialize);