Javascript 动态添加GooglePlaces会导致下拉列表
我用谷歌地图找到了附近的地方。我可以在控制台窗口中成功地找到我想要的所有地方。但我无法将它们动态添加到下拉框中。例如：如果您在第一个下拉框中选择银行，您将在控制台窗口中获得银行名称，但我无法在新的下拉菜单中添加位置。帮我做这件事Javascript 动态添加GooglePlaces会导致下拉列表,javascript,jquery,google-maps,google-maps-api-3,Javascript,Jquery,Google Maps,Google Maps Api 3,我用谷歌地图找到了附近的地方。我可以在控制台窗口中成功地找到我想要的所有地方。但我无法将它们动态添加到下拉框中。例如：如果您在第一个下拉框中选择银行，您将在控制台窗口中获得银行名称，但我无法在新的下拉菜单中添加位置。帮我做这件事 <!DOCTYPE html> <html> <head> <style> html, body, #map-
<!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>
html，正文，#地图画布{
身高：100%；
}
var城市圈；
var标记；
var-markerEnd；
var映射；
var infowindow=new google.maps.infowindow（）；
菌丝中心变种；
var标记=[]；
var-markerEndArr=[]；
var循环=[]；
var animationStatus=null；
//google.maps.visualRefresh=true；
var polylineoptions实际=新的google.maps.Polyline({
strokeColor:#008cff“，
笔划不透明度：0.8，
冲程重量：2，
});
var方向显示；
var directionsService=new google.maps.directionsService（）；
directionsDisplay=新建google.maps.DirectionsRenderer({
对,，
多段线选项：多段线选项实际，
对,，
});
函数初始化（）
{
myCenter=newgoogle.maps.LatLng（13.083980.2700）；
变量选项={
中心：迈森特，
//最大缩放：15，
缩放：15，
};
map=new google.maps.map（document.getElementById（'map-canvas'），选项）；
方向显示.setMap（地图）；
}
函数setPlaces（）
{
directionsDisplay.setMap（空）；
var placeType=document.getElementById（'cmbMoreFunction'）。选项[document.getElementById（'cmbMoreFunction'）。selectedIndex]。值；
var kiloDistance=document.getElementById（'km'）。选项[document.getElementById（'km'）。selectedIndex]。值；
var请求={
地点：迈森特，
半径：parseInt（千距离），
类型：[placeType]
};
var service=newgoogle.maps.places.PlacesService（地图）；
变量循环次数={
strokeColor:#FF0040“，
笔划不透明度：0.9，
冲程重量：1，
填充颜色：“DF013A”，
填充不透明度：0.2，
地图：地图，
中心：迈森特，
半径：parseInt（千距离），
};
服务.nearbySearch（请求、回调）；
函数回调（结果、状态）
{
if（status==google.maps.places.PlacesServiceStatus.OK）{
$（“#placeResult”）.show（）
对于（var i=0；i
删除当前添加选项的循环：
谢谢！我太蠢了！我没有向下滚动查看结果！别担心，我也花了一些时间才意识到还有一件事！如果我将位置从一个银行更改到另一个银行，下拉列表不会更新，我尝试删除元素并添加新的，但这不起作用。是的，我现在也得到了该元素！使用$（“#fillResult”）.remove（）；谢谢：）如果在下拉列表中创建的不同位置之间动态选择。如何为其指定marker.bounce动画
$("#fillResult").append("<option>"+results[0]+"</option>")
$("#fillResult").append("<option>"+k+"</option>");
return marker;
for (var i = 0; i < results.length; i++) {
var k=results[i].vicinity;
console.log(k)
$("#fillResult").append("<option>"+k+"</option>")
}
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');
}
}
$("#fillResult").change(function(){
google.maps.event.trigger($(this).find('option:selected').data('marker'),
'mouseover');
});