在 Rails 3.2 中使用 geocomplete 单击标记添加 Infowindow

Question

我一直在尝试在我的谷歌地图上实现infowindow，它使用 geocomplete.js 搜索/获取街道的详细信息以及获取 lang/lat 非常好。 现在我需要一个关于标记的信息窗口，这样当用户单击标记时，我可以显示更多信息，但我无法让它工作，因为我无法得到任何错误，以便我可以调试和解决它。我知道我遗漏了一些东西，但我认为我的代码很简单，我应该得到 infowindow。这是我的 _view.html.erb 中的代码，它在 bootstrap 3 modal 上呈现。

<script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=places"></script>
  <script src="assets/jquery.geocomplete.js"></script>
<p class="text-center text-success">Add a location</p>
<hr>
 <div class="container">
 <%= form_for(@place,:html=>{:multipart => true,:remote=>true,:class=>"form-horizontal",:role=>"form"}) do |f |%>

      <%= f.text_field :address,:class=>"form-control" %>
      <p class="text-info" style="font-size:10px !important;">if you cannot find the location,Drag the marker on the map. </p>

          <div id="logs" data-lat="<%=  current_user.latitude%>" data-long="<%=  current_user.longitude%>">
              <%= current_user.address %> 
          </div>    


      <div id="mapnew" style="width:500px;height:500px"></div>

  <%end%>

  </div>   


<script type="text/javascript">


var lat=$('#logs').data("lat");
var long=$('#logs').data("long");


  var myLatlng = new google.maps.LatLng(lat,long);
var options = {
  map: "#mapnew",
  location: myLatlng,
  mapOptions: {
    streetViewControl: false,
    center: myLatlng,
    mapTypeId : google.maps.MapTypeId.ROADMAP
  },
  markerOptions: {
    draggable: true
  }
};


function initialize(){
$("#place_address").geocomplete(options).bind("geocode:result", function(event, result){
  $('#logs').html('<b>'+result.formatted_address+'</b>');
  var map = $("#place_address").geocomplete("map");
  map.setZoom(15);
  map.setCenter(result.geometry.location);
  //get the marker
  /////////////////////////////here i get the marker to set the infowindow but doesnt works
  ////////////////////This code is not working -START
  var marker = $("#place_address").geocomplete("marker");
  marker.setMap(map);
  var infowindow = new google.maps.InfoWindow({
  content:"Hello World!"
  });

  google.maps.event.addListener(marker, 'click', function() {
  infowindow.open(map,marker);
  });
 ///////////////////////This code is not working-ENDS  
});//method ends

$("#place_address").bind("geocode:dragged", function(event, latLng){
  console.log('Dragged Lat: '+latLng.lat());
  console.log('Dragged Lng: '+latLng.lng());
//set to true to save the coordinated directly in db without using geocoder
  var map = $("#place_address").geocomplete("map");
    map.panTo(latLng);
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode({'latLng': latLng }, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      if (results[0]) {
        var road = results[0].address_components[1].long_name;
        var town = results[0].address_components[2].long_name;
        var county = results[0].address_components[3].long_name;
        var country = results[0].address_components[4].long_name;
        $('#logs').html('<b>'+road+' '+town+' '+county+' '+country+'</b>');

      }
    }
  });
});//method ends

}//initialize method ends

$(document).ready(function(){
  $('#mapnew').html("<p class='text-center text-alert'><b><i>Loading map...</i><i class='fa fa-spinner fa-spin fa-2x'></i></b></p>");
//load the map after 2 seconds to avoid blurring
setTimeout('initialize()', 3000);
})//document ready ends
</script>

Answer 1

您的脚本适合我，但也许您没有得到想要的结果。

最初在地图上绘制的标记是基于options.location创建的

您已经为location 提供了LatLng，因此无需进行地理编码，并且在创建此标记时geocode:result-handler 将不会运行（因此不会添加信息窗口）

可能的解决方案：触发geocode:result-event 并传递已经可用的数据：

$("#place_address")
  .geocomplete(options)
    .bind("geocode:result", function(event, result){ 
      $('#logs').html('<b>'+result.formatted_address+'</b>');
      var map = $("#place_address").geocomplete("map"),
///////////////////////This code should work now as expected-STARTS 
          marker = $("#place_address").geocomplete("marker");

          //there is only a single marker, use only a single infowindow
          if(!marker.get('infowindow')){
            marker.set('infowindow',new google.maps.InfoWindow());
            google.maps.event.addListener(marker, 'click', function() {
              this.get('infowindow').open(map,this);
            });
          }
      marker.get('infowindow').close();    
      map.setZoom(15);
      map.setCenter(result.geometry.location);
      marker.setMap(map);
      marker.get('infowindow').setContent(result.formatted_address)


 ///////////////////////This code should work now as expected-ENDS  
})
//method ends
//trigger the event
.trigger('geocode:result',
         {geometry:{location:myLatlng},
          formatted_address:$('#logs').text()});