2

我有一个show_map.html.erb显示谷歌地图的页面（目前运行良好）。我想在地图上添加图像而不是图钉标记。我为这个问题搜索了很多，并在 StackOverflow 上找到了诸如这个问题之类的资源。但是，我目前的解决方案不起作用。

在使用之前我必须上传图像吗？此外，为什么我不能使用public/alert.pngOR 之类的图像app/asset/images/alert.png？我也参考了 Google Maps API 文档，但我无法理解这些示例。

我的控制器：

def show_map
  @location = Location.find(params[:id])
  @address = @location.landmark.gsub(","+")+",+"+@location.place.gsub(","+")+",+"+@location.country
  p @address
end

我的观点：

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=<my api key>&sensor=true"> type="text/javascript"></script>
<script type="text/javascript">
  var contentString = '<div id="content">'+
                      '<div id="siteNotice">'+
                      '</div>'+
                      '<h2 id="firstHeading" class="firstHeading" ><font color="#FF0000"><%=@location.title%></font></h2>'+
                      '<div id="bodyContent" >'+
                      '<p><%=@location.description%></p>'+
                      '<p><a href="http:www.google.com">'+
                      'more info</a> (created on <%=(@location.created_at).strftime("%A, %d/%m/%Y")%>)</p>'+
                      '</div>'+
                      '</div>';
  var infowindow = new google.maps.InfoWindow({
    content: contentString
  });
  //set the image
  //var image = '/assets/images/alert.png';
  // Enable the visual refresh
  google.maps.visualRefresh = true;

  var geocoder;
  var map;        
  function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var mapOptions = {
      zoom: 17,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map"), mapOptions);
    //var image = "#{Rails.root}/app/assets/images/alert.png";
    //code to search the address
    //var address = document.getElementById("address").value;
    var address='<%= @address.parameterize %>';
    //alert(address);
    geocoder = new google.maps.Geocoder();  
    geocoder.geocode({
      'address': address
    }, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker({
          map: map,
          position: results[0].geometry.location,
          title:"<%=@location.title%>",
          animation: google.maps.Animation.DROP,
          visible: true,
          draggable: true,
          icon: image
        });

        //animation for marker
        function toggleBounce() {
          if (marker.getAnimation() != null) {
            marker.setAnimation(null);
          } else {
            marker.setAnimation(google.maps.Animation.DROP);
          }
        }

        //commented as show the info ON click on the marker
        google.maps.event.addListener(marker, 'click', function() {
          infowindow.open(map,marker);
        });
        //listener for animation
        google.maps.event.addListener(marker, 'click', toggleBounce);
      } else {
        alert("Geocode was not successful for the following reason: " + status);
      }
    });
  }
</script>
<body onload="initialize()">
  <div id="map" align="right" style="min-height: 500px; height: 400px; width: 400px"></div>
</body>
4

1 回答 1

0

如果您使用gmaps4rails gem 并假设您已经添加了所有依赖项和脚本，您将在控制器中拥有与以下内容非常相似的内容。您将替换“XYZ”并添加您自己的网址。

def index
  @XYZs = XYZ.all

  @hash = Gmaps4rails.build_markers(@XYZ) do |XYZ, marker|
  marker.lat XYZ.latitude
  marker.lng XYZ.longitude
  marker.infowindow XYZ.artist
  marker.picture({
    url: "WWW.YourWebAddressHere.com",
    width: 32,
    height: 32,
})
end

有我发现非常有用的 gem 的实时示例和视频文档。

于 2014-03-22T04:25:01.160 回答