我使用谷歌地图的地方找到附近的地方。我可以在控制台窗口成功获取我想要的所有地方。但是我无法将它们动态添加到下拉框中。例如：如果您在第一个下拉列表中选择bank，您将在控制台窗口中获取bank的名称，但我无法在新的下拉菜单中添加这些位置。帮我做一下
<!DOCTYPE html>
<html>
<head>
<style>
html, body, #map-canvas {
height: 100%;
}
</style>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.js'></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3&sensor=true&libraries=places&geometry"></script>
<script>
var cityCircle;
var marker;
var markerEnd;
var map;
var infowindow = new google.maps.InfoWindow();
var myCenter;
var markers = [];
var markerEndArr = [];
var circles = [];
var animationStatus=null;
//google.maps.visualRefresh = true;
var polylineOptionsActual = new google.maps.Polyline({
strokeColor:"#008cff",
strokeOpacity:0.8,
strokeWeight:2,
});
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
directionsDisplay = new google.maps.DirectionsRenderer({
preserveViewport: true,
polylineOptions: polylineOptionsActual,
suppressMarkers: true,
});
function initialize()
{
myCenter=new google.maps.LatLng(13.0839, 80.2700);
var options = {
center:myCenter,
//maxZoom: 15,
zoom: 15,
};
map = new google.maps.Map(document.getElementById('map-canvas'), options);
directionsDisplay.setMap(map);
}
function setPlaces()
{
directionsDisplay.setMap(null);
var placeType = document.getElementById('cmbMoreFunction').options[document.getElementById('cmbMoreFunction').selectedIndex].value;
var kiloDistance=document.getElementById('kilometers').options[document.getElementById('kilometers').selectedIndex].value ;
var request = {
location:myCenter,
radius: parseInt(kiloDistance),
types: [placeType]
};
var service = new google.maps.places.PlacesService(map);
var circleOptions = {
strokeColor:"#FF0040",
strokeOpacity:0.9,
strokeWeight:1,
fillColor:"#DF013A",
fillOpacity:0.2,
map: map,
center: myCenter,
radius:parseInt(kiloDistance),
};
service.nearbySearch(request, callback);
function callback(results, status)
{
if (status == google.maps.places.PlacesServiceStatus.OK) {
$("#placeResult").show()
for (var i = 0; i < results.length; i++) {
var k=results[i].vicinity;
console.log(k)
$("#fillResult").append("<option>"+results[0]+"</option>")
}
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(null);
}
for (var i = 0; i < circles.length; i++) {
circles[i].setMap(null);
}
for (var i = 0; i < results.length; i++) {
place = results[i];
if(calcDistance(results[i].geometry.location.lat () , results[i].geometry.location.lng ()) <= kiloDistance && place.name.toLowerCase() != placeType)
{
createMarker(place,placeType );
}
}
}
}
function stopAnimation()
{
if(animationStatus!=null)
{
animationStatus.setAnimation(null);
}
}
function createMarker(place , placeType)
{
marker = new google.maps.Marker({
position: place.geometry.location,
icon:placeType+'.png',
});
marker.setMap(map);
google.maps.event.addListener(marker, 'mouseover', function() {
var content = "<div class='infowindow-content'>"+"Place Name:"+ place.name+"<br>"+"<hr>" +"Distance From Center:"+(calcDistance(this.position.lat(),this.position.lng())/1000).toFixed(1)+" "+"KM"+ "</div>" ;
stopAnimation();
animationStatus=this;
this.setAnimation(google.maps.Animation.BOUNCE);
var start = myCenter;
var end = new google.maps.LatLng(this.position.lat(),this.position.lng());
var request = {
origin:start,
destination:end,
travelMode: google.maps.TravelMode.DRIVING,
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
directionsDisplay.setMap(map);
}
});
infowindow.setContent(content);
infowindow.open(map, this);
});
google.maps.event.addListener(marker, 'mouseout', function() {
if(infowindow)
{
infowindow.close()
}
});
markers.push(marker);
circles.push(cityCircle);
}
cityCircle = new google.maps.Circle(circleOptions);
function calcDistance(placeLat , placeLon)
{
return google.maps.geometry.spherical.computeDistanceBetween(myCenter, new google.maps.LatLng(placeLat , placeLon))
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body onload="setPlaces()">
<div id="map-canvas" style="width: 90%;float:left"></div>
<div style="width: 10%; float:right">
<select id="cmbMoreFunction" onchange="setPlaces()" >
<option value=""><------------></option>
<option value="atm">Atm</option>
<option value="bank">Banks</option>
<option value="gym">Gym</option>
<option value="hospital">Hospital</option>
<option value="library">Library</option>
<option value="park">Park</option>
<option value="pharmacy">Pharmacy</option>
<option value="restaurant">Restaurant</option>
<option value="school">Schools</option>
<option value="store">Stores</option>
<option value="bus_station">Bus Stop</option>
</select>
<select id="kilometers" onchange="setPlaces()">
<option value="1000">1 KM</option>
<option value="2000">2 KM</option>
<option value="3000">3 KM</option>
</select>
</div>
<div id="placeResult" style="display: none">
<select id="fillResult"></select>
</div>
</body>
</html>
答案 0 :(得分：1)
此：
$("#fillResult").append("<option>"+results[0]+"</option>")
应该是：
$("#fillResult").append("<option>"+k+"</option>");
注意：选择将显示在地图下方，因为选项的文本太大。如果您希望选择显示在地图旁边，则必须通过CSS限制width
与评论相关（标记 - 动画）：
首先，您需要对标记的引用。将其添加到createMarker函数的末尾：
return marker;
删除当前添加选项的循环：
<击>
for (var i = 0; i < results.length; i++) { var k=results[i].vicinity; console.log(k) $("#fillResult").append("<option>"+k+"</option>") }
修改调用createMarkers的循环：
for (var i = 0; i < results.length; i++) {
place = results[i];
if(calcDistance(results[i].geometry.location.lat () ,
results[i].geometry.location.lng ())
<= kiloDistance && place.name.toLowerCase() != placeType)
{
$("<option/>")
.text(results[i].vicinity)
.data('marker',createMarker(place,placeType ))
.appendTo('#fillResult');
}
}
标记的引用现在存储在<option/>的数据中。
最后将一个更改侦听器应用于#fillResult（不在循环内，可以在初始化中完成），触发鼠标悬停标记（将具有与悬停标记相同的效果）：
$("#fillResult").change(function(){
google.maps.event.trigger($(this).find('option:selected').data('marker'),
'mouseover');
});