从谷歌地理编码传递lat / lon到google地方

时间:2014-10-18 21:50:28

标签: javascript google-places-api google-geocoding-api

我正在开展一个项目,根据用户输入地址显示附近的咖啡店列表。在单独的脚本中,我可以获取文本地址,以便在地图上显示lat / lon和google地点,但是当我尝试将它们组合时,文本地址中的lat / lon不会传递到google地方。我还在学习javascript,所以我不知道它是不是异步还是什么。我已经阅读了大量的SO问题和API文档,但我无法弄明白。谢谢!

这是我提交的表格:

<div id="search">
  <input id="searchaddress" type="textbox" value="Where are you?">
  <input type="button" value="Caffinate" onclick="initialize()">
</div> 
<div id="map"></div>
<div id="result-list"></div>

这是我的JavaScript:

  var map;
  var infowindow;
  var centralLocation = null;
  var side_bar_html = "<table border='1'>";
  var gmarkers = [];
  var address = null;
  var lat = null;
  var lng = null;
  var service = null;
  var bounds = null;

  function initialize() {
    centralLocation = new google.maps.LatLng(38.907, -77.036);
    var request = {
      location: centralLocation,
      keyword: ['coffee'],
      types: ["cafe", "restaurant", "bakery"],
      rankBy: google.maps.places.RankBy.DISTANCE
    };
    infowindow = new google.maps.InfoWindow();
    bounds = new google.maps.LatLngBounds();
    map = new google.maps.Map(document.getElementById('map'), {
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      zoom: 15
    });
    service = new google.maps.places.PlacesService(map);

  var query = location.search.substring(1);

  var pairs = query.split("&");

  for (var i=0; i<pairs.length; i++) {

  var pos = pairs[i].indexOf("=");
  var argname = pairs[i].substring(0,pos).toLowerCase();
  var value = pairs[i].substring(pos+1).toLowerCase();

    if (argname == "lat") {lat = parseFloat(value);}
    if (argname == "lng") {lng = parseFloat(value);}
    if (argname == "address") {
      address = unescape(value)
      geocoder = new google.maps.Geocoder();

      var searchaddress = document.getElementById('searchaddress').value;
      console.log(searchaddress);
      geocoder.geocode({"searchaddress": address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          centralLocation = results[0].geometry.location;
          map.setCenter(centralLocation);
          map.fitBounds(results[0].geometry.viewport);
        if (!service) service = new google.maps.places.PlacesService(map);
          request.location = centralLocation;
          service.search(request, callback);
        } else {
          alert("address "+address+ " not found");
        }
      });
    }
  }
    if (lat && !isNaN(lat) && lng && !isNaN(lng)) {
       centralLocation = new google.maps.LatLng(lat, lng);
       map.setCenter(centralLocation);
       request.location = centralLocation;
       if (!service) service = new google.maps.places.PlacesService(map);
       service.search(request, callback);
    } else {        
       if (!service) service = new google.maps.places.PlacesService(map);
       if (!address) service.search(request, callback);
    }
  }

  function callback(results, status) {
    if (status == google.maps.places.PlacesServiceStatus.OK) {
      for (var i = 0; i < 10; i++) {
        createMarker(results[i]);
      }
    side_bar_html += "</table>";
    document.getElementById('result-list').innerHTML = side_bar_html;
    }
  }

  function createMarker(place) {
    var placeLoc = place.geometry.location;
    var marker = new google.maps.Marker({
      map: map,
      // icon: place.icon,
      position: place.geometry.location
    });
    bounds.extend(place.geometry.location);
    gmarkers.push(marker);
    google.maps.event.addListener(marker, 'click', function() {
      infowindow.setContent(place.name+"<br>"+place.vicinity);
      infowindow.open(map, this);
    });
    side_bar_html += "<tr><th align='left'><a href='javascript:google.maps.event.trigger(gmarkers["+(gmarkers.length-1)+"],\"click\");'>" + place.name + "</a></th><td>" + place.vicinity + "</td></tr>";
    map.fitBounds(bounds);
  }

  google.maps.event.addDomListener(window, 'load', initialize);

0 个答案:

没有答案