1
你好我正在做我的第一個JavaScript使用gooogle地圖API.my代碼是在特定類型的組織，如銀行或學校在接近半徑，我已經使用谷歌地圖放置搜索庫，並從給定的json數據中給出結果。但我有一個下拉列表，其中一個是用戶名，另一個是組織類型。我的最終輸出將是在從下拉列表中單擊用戶和類型後，我的地圖將顯示用戶半徑中的組織類型。我將下拉列表值保存在變量中，但無法使用這些值更新我的地圖。我是否需要在更新方法下設置初始化方法，或者是否可以幫助我理清這個問題。這將是很大的幫助使用下拉列表項更新近谷歌地圖的搜索
<!DOCTYPE html>
<html>
<head>
<title>Place searches</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places"></script>
<script>
var map;
var infowindow;
var userlist=[
{
"username":"Tom",
"Current_latitude":23.752805,
"Current_longitude":90.375433,
"radius":500
},
{
"username":"Jane",
"Current_latitude":23.752805,
"Current_longitude":90.375433,
"radius":400
},
{
"username":"Dave",
"Current_latitude": 23.765138,
"Current_longitude":90.362601,
"radius":450
},
{
"username":"Sarah",
"Current_latitude": 23.792452,
"Current_longitude":90.416696,
"radius":600
},
{
"username":"John",
"Current_latitude": 23.863064,
"Current_longitude":90.400126,
"radius":640
}
];
function update()
{
var select_name_value=document.getElementById("localperson").value;
var select_type=document.getElementById("localtype").value;
if((select_name_value=="tomvalue")&&(select_type=="school"))
{
alert("inside update and value are true");
}
}
function initialize()
{
var pyrmont = new google.maps.LatLng(userlist[0].Current_latitude, userlist[0].Current_longitude);
map = new google.maps.Map(document.getElementById('map-canvas'),
{
center: pyrmont,
zoom: 15
});
var request =
{
location: pyrmont,
radius:userlist[0].radius ,
types: ['school']
};
infowindow = new google.maps.InfoWindow();
var service = new google.maps.places.PlacesService(map);
service.nearbySearch(request, callback);
}
function callback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
createMarker(results[i]);
}
}
}
function createMarker(place) {
var placeLoc = place.geometry.location;
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(place.name);
infowindow.open(map, this);
});
}
google.maps.event.addDomListener(window, 'load', update);
</script>
</head>
<body>
<div id="map-canvas"> </div>
<label><font size="7" color="green">User</fontsize></label>
<select id="localperson">
<option value="" >--Select--</option>
<option value="tomvalue" >Tom</option>
<option value="janevalue" >Jane</option>
<option value="davevalue" >Dave</option>
<option value="sarahvalue" >Sarah</option>
<option value="johnvalue" >John</option>
</select>
<label><font size="7" color="violet">Type</fontsize></label>
<select id="localtype">
<option value="" >--Select--</option>
<option value="schoolvalue" >School</option>
<option value="restaurantvalue" >Restaurant</option>
<option value="bankvalue" >Bank</option>
<option value="hospitalvalue" >Hospital</option>
</select>
</body>
</html>