Fatal编程技术网
  • javascript/
  • Javascript 使用下拉列表项更新google地图中的近地点搜索

Javascript 使用下拉列表项更新google地图中的近地点搜索

javascript google-maps

Javascript 使用下拉列表项更新google地图中的近地点搜索,javascript,google-maps,Javascript,Google Maps,您好，我正在使用gooogle map API在javascript中完成我的第一个作业。我的代码是查找特定类型的组织，例如近半径的银行或学校，我已经使用了google map place搜索库，它给出了来自给定json数据的结果。但我有一个下拉列表，其中一个是用户名，另一个是组织类型。我的最终输出将是在单击dropdownlist中的用户和类型后，我的地图将显示用户半径中的组织类型。我将下拉列表值保存在变量中，但无法使用这些值更新我的地图。我是否需要在update method下设置initi

您好，我正在使用gooogle map API在javascript中完成我的第一个作业。我的代码是查找特定类型的组织，例如近半径的银行或学校，我已经使用了google map place搜索库，它给出了来自给定json数据的结果。但我有一个下拉列表，其中一个是用户名，另一个是组织类型。我的最终输出将是在单击dropdownlist中的用户和类型后，我的地图将显示用户半径中的组织类型。我将下拉列表值保存在变量中，但无法使用这些值更新我的地图。我是否需要在update method下设置initialize method或其他什么，请帮助我解决这个问题。这将是很大的帮助

<!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>


地点搜索
html，正文，#地图画布{
身高：100%；
边际：0px；
填充：0px
}
var映射；
var信息窗口；
var用户列表=[
{
“用户名”：“汤姆”，
“当前纬度”：23.752805，
“当前经度”：90.375433，
“半径”：500
},
{
“用户名”：“简”，
“当前纬度”：23.752805，
“当前经度”：90.375433，
“半径”：400
},
{
“用户名”：“Dave”，
“当前纬度”：23.765138，
“当前经度”：90.362601，
“半径”：450
},
{
“用户名”：“莎拉”，
“当前纬度”：23.792452，
“当前经度”：90.416696，
“半径”：600
},
{
“用户名”：“约翰”，
“当前纬度”：23.863064，
“当前经度”：90.400126，
“半径”：640
}
];
函数更新（）
{
var select_name_value=document.getElementById（“localperson”）.value；
var select_type=document.getElementById（“localtype”）.value；
如果（（选择名称值=“tomvalue”）&（（选择类型=“学校”））
{
警报（“内部更新和值为真”）；
}
}
函数初始化（）
{
var pyrmont=new google.maps.LatLng（用户列表[0]。当前纬度，用户列表[0]。当前经度）；
map=new google.maps.map（document.getElementById（'map-canvas'），
{
中心：皮尔蒙特，
缩放：15
});
var请求=
{
地点：皮尔蒙特，
半径：用户列表[0]。半径，
类型：[“学校”]
};
infowindow=new google.maps.infowindow（）；
var service=newgoogle.maps.places.PlacesService（地图）；
服务.nearbySearch（请求、回调）；
}
函数回调（结果、状态）{
if（status==google.maps.places.PlacesServiceStatus.OK）{
对于（var i=0；i
您的代码中存在一些问题

首先，您应该执行
google.maps.event.addDomListener（窗口“加载”，初始化）而不是更新以设置地图

第二，当选择了
时，您应该调用
更新函数
，并且仅当且仅当选择了两个选项时才执行真正的更新

然后，
元素中的值并不反映Javascript对象中的内容，而且，您应该使用对象，使用值作为键，而不是使用数组。解决这个问题的办法可能是一些愚蠢的行动

最后，为了更新和删除标记，您需要跟踪它们，例如将它们放入数组中

希望这能有所帮助