繁体   English   中英

如何自定义Google Map Marker图标?

[英]How do I customize Google Map Marker Icon?

我不知道如何更改Google Map的标记图标。 这是我的代码。 大部分标记已显示。 我只想更改当前位置。

控制者

  def restaurant_nearby
        @restaurants = Restaurant.near(params[:lat], params[:lng], params[:num], params[:lang])
        @hash = Gmaps4rails.build_markers(@restaurants.to_hash) do |r, marker|
                        marker.lat r["lat"]
                        marker.lng r["lng"]
                        marker.infowindow render_to_string(partial: "area/infowindow", locals: { place: r })
                        marker.json({title: r["restaurantname"]})
        end

        @hash_current_pos = {
                        lat: params[:lat],
                        lng: params[:lng],
                        icon: '/here.png',
                        infowindow: render_to_string(partial: "area/infowindow_current_pos"),
                        title: "You are here"
        }

        @hash = @hash.push(@hash_current_pos)

        content = render_to_string(:partial => 'area/restaurant_map', locals: {hash: @hash})
        render json: {html: content}, status: :ok
  end

这是视图脚本。 area / _restaurant_map.html.slim

javascript:
  jQuery(function(){

       mapStyle = [[{"featureType":"administrative.country","elementType":"geometry.fill","stylers":[{"saturation":"-35"}]}]];

      handler = Gmaps.build('Google');
      handler.buildMap({ provider: {styles: mapStyle}, internal: {id: 'map'}}, function(){
      markers = handler.addMarkers( #{raw hash.to_json});
      handler.bounds.extendWith(markers);
      handler.fitMapToBounds();
      handler.getMap().setZoom(15);
      });
 });

/! Le HTML5 shim, for IE6-8 support of HTML elements
/[if lt IE 9]
  = javascript_include_tag "//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"

我将不胜感激任何建议。

最后,我锻炼了。 像这样。

@hash_current_pos = {
                        lat: params[:lat],
                        lng: params[:lng],
                        picture: {url: '/here.png', width: 140, height: 180},
                        infowindow: render_to_string(partial: "area/infowindow_current_pos"),
                        title: "You are here"
        }

感谢所有的贡献!

如果您只想自定义Google的图标,则可以设置sizecolor

否则, markers=icon:URLofIcon|markerLocation

URLofIcon是您要使用的图标的URL,应该对其进行URL编码(使用一种缩短服务,该服务可能会对您进行URL编码并使代码看起来更好)

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM