我的标记没有显示附近搜索的结果。有人可以帮忙吗?我非常新用javascript和谷歌api。 我基本上试图找到该地区的所有麦当劳。显示的唯一标记是用户的当前位置。提前致谢! :d
<!DOCTYPE HTML>
<html>
<head>
<title>Basic GeoLocation Map</title>
<!-- Google Maps and Places API -->
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
function initGeolocation() {
if (navigator.geolocation) {
// Call getCurrentPosition with success and failure callbacks
navigator.geolocation.getCurrentPosition(success, fail);
} else {
alert("Sorry, your browser does not support geolocation services.");
}
}
var map;
var service;
function handleSearchResults(results, status) {
console.log(results);
for (var i = 0; i < results, length; i++) {
var marker = new google.maps.Marker({
position: results(i).geometry.location,
map: map
});
}
}
function performSearch() {
var request = {
bounds: map.getBounds(),
name: "McDonald's"
}
service.nearbySearch(request, handleSearchResults);
}
function success(position) {
// Define the coordinates as a Google Maps LatLng Object
var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
// Prepare the map options
var mapOptions = {
zoom: 14,
center: coords,
mapTypeControl: false,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// Create the map, and place it in the map_canvas div
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
// Place the initial marker
var marker = new google.maps.Marker({
position: coords,
map: map,
title: "Your current location!"
});
marker.setMap(map);
service = new google.maps.places.PlacesService(map);
google.maps.event.addListenerOnce(map, 'bounds_changed', performSearch);
}
function fail() {
// Could not obtain location
}
//Request places from Google
function placesRequest(title, latlng, radius, types, icon) {
//Parameters for our places request
var request = {
location: latlng,
radius: radius,
types: types
};
//Make the service call to google
var callPlaces = new google.maps.places.PlacesService(map);
callPlaces.search(request, function (results, status) {
//trace what Google gives us back
$.each(results, function (i, place) {
var placeLoc = place.geometry.location;
var thisplace = new google.maps.Marker({
map: map,
position: place.geometry.location,
icon: icon,
title: place.name
});
})
});
}
</script>
</head>
<body onload="initGeolocation();">
<div style="position:absolute; width:380px; height: 100%; overflow:auto; float:left; padding-left:10px; padding-right:10px;">
<h1>Google Places API</h1>
<p>We're using both google places (to search for things in a certain category) AND google maps (to put the things on a map)~! PLUS we're using geolocatoin to automatically centre the map on the user's current location!</p>
</div>
<!-- map div container -->
<div id="map_canvas" style="height:500px; margin-left:400px; border-right: 1px solid #666666; border-bottom: 1px solid #666666; border-top: 1px solid #AAAAAA; border-left: 1px solid #AAAAAA;"></div>
</body>
</html>
答案 0 :(得分:0)
将performSearch
(使用不当)更改为
function performSearch() {
var request = {
location: map.getCenter(),
radius: 1500,
name: ["McDonald's"]
}
service.nearbySearch(request, handleSearchResults);
}
和handleSearchResults
(一些拼写错误)到
function handleSearchResults(results, status) {
for(var i = 0; i < results.length; i++) {
var marker=new google.maps.Marker({
position: results[i].geometry.location,
map: map
});
}
}
..你的例子有效。对我来说,在附近返回5个麦当劳: - )