Question

你好我正在使用gooogle地图API在javascript中完成我的第一次任务。我的代码是在近半径找到特定类型的组织，如银行或学校，我已经使用谷歌地图搜索库，它给出了我给出的结果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>

Answer 1

您的代码中存在一些问题。

首先，您应该google.maps.event.addDomListener(window, 'load', initialize);而不是更新以设置地图。

其次，当update function为<select>时，您应该致电onSelected，并且当且仅当选择了两个选项时，才会进行实际更新。

然后，<select>元素中的值不会反映您在Javascript对象中的内容，您也应该使用一个对象，使用您的值作为键，而不是使用数组。对此的解决方案可能是一些愚蠢的操作..

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

希望这有帮助。

http://jsfiddle.net/coxb9so4/

使用下拉列表项

1 个答案: