Question

环境： MacOSX，RoR 3.2.6，gmaps4rails 1.5.5，Google Maps API V3

欲望：使用可支持Google地图中符号机制的gmaps4rails在地图上显示折线会很不错。

参考文档：

Google Maps API Polylines Symbols Documentation

Google Maps API Symbol Ref

Live example of symbols on polylines

Gmaps4Rails Documentation on Polylines

问题的当前状态我目前能够使用vanilla属性（strokeColor，strokeWeight，strokeOpacity）来利用gmaps4rails绘制折线。当我尝试添加用于在行上创建符号的元数据时，问题就出现了。

Google地图中的工作代码

从折线上的符号文档中，您可以创建一个带有1-n图标元素的图标数组。工作样本的一个例子是：

dashed = new google.maps.Polyline({ 
  path: [
    new google.maps.LatLng(40, -80),
    new google.maps.LatLng(-50, 80)
  ],
  geodesic: true,
  strokeOpacity: 0.0,
  strokeColor: 'yellow',
  icons: [{
    icon: {
      path: 'M 0,-2 0,2',
      strokeColor: 'red',
      strokeOpacity: 1.0,          
    },
    repeat: '24px'
  }],
  map: map,
});

其中，虚线是要创建的折线，图标数组是通过Javascript中的SVG内联定义的。

在Chrome检查窗口中检查对象并在完成地图之前设置断点时，会得到一个格式如此的对象（删除了通用访问器和对象引用）：

dashed
  geodesic: true
  icons: Array[1]
    0: Object
      icon: Object
        path: "M 0,-2 0,2"
        strokeColor: "red"
        strokeOpacity: 1
      repeat: "24px"
      length: 1
  latLngs: Nf
  map: sh
  strokeColor: "yellow"
  strokeOpacity: 0

这很好用。然而，它是在静态html中创建的javascript，并应用于onLoad（）函数。

我尝试使用gmaps4rails进行复制

我有一个通用的地图控制器，可以加载多个多边形，符号和折线。如前所述，获得泛型折线是没有问题的。这是控制器中的Ruby代码，我试图用它来生成带有基本虚线符号的折线。

# Array to push created lines into for pushing through JSON
polyline_array = []
# Array to push the icons created into for use by the gmaps4rails.base.js.coffee
icons_array = []
# SVG path representation of symbol
symbol = {:path => 'M 0,-2 0,2', :strokeColor => 'red', :strokeOpacity => 1.0}
# Create actual instance of the icon element to push to the icons array
tmpIcon = {:icon => symbol, :repeat => '24px'}
# Push to the icons array
icons_array.push(tmpIcon)

@lines.each do |line|
  tmpLine = []
  line.points.each do |point|
    # Only populate the icon and line style for the first point in the
    # polylines point array
    if point == line.points.first
      tmpPoint = {:clickable => true, :linename => line.name,
        :icons => icons_array, :strokeOpacity => 0.0, :strokeColor => 'yellow'}
    else
      tmpPoint = {}
    end
    tmpPoint.merge ! :lat => point.latitude, :lng => point.longitude
    tmpLine.push(tmpPoint)
  end
  polyline_array.push(tmpLine)
end
@polyline_json = polyline_array.to_json

我对gmaps4rails.googlemaps.js.coffee脚本进行了修改，以将图标插入折线创建功能。

for element in polyline
  #if we have a coded array
  if element.coded_array?
    decoded_array = new google.maps.geometry.encoding.decodePath(element.coded_array)
    #loop through every point in the array
    for point in decoded_array
      polyline_coordinates.push(point)

  #or we have an array of latlng
  else
    #by convention, a single polyline could be customized in the first array or it uses default values
    if element == polyline[0]
      strokeColor   = element.strokeColor   || @polylines_conf.strokeColor
      strokeOpacity = 0
      # Set explicit strokeOpacity to 0 to try and match example that works
      # Would do something sexy later
      #strokeOpacity = element.strokeOpacity || @polylines_conf.strokeOpacity
      # Comment out strokeWeight to make it match object sent in working example
      #strokeWeight  = element.strokeWeight  || @polylines_conf.strokeWeight
      clickable     = element.clickable     || @polylines_conf.clickable
      zIndex        = element.zIndex        || @polylines_conf.zIndex
      icons         = element.icons         || @polylines_conf.icons

    #add latlng if positions provided
    if element.lat? && element.lng?
      latlng = @createLatLng(element.lat, element.lng)
      polyline_coordinates.push(latlng)

# Construct the polyline
new_poly = new google.maps.Polyline
  path:         polyline_coordinates
  strokeColor:  strokeColor
  strokeOpacity: strokeOpacity
  # Comment out since it doesn't exist in the object since it was commented
  # out above
  #strokeWeight: strokeWeight
  clickable:    clickable
  zIndex:       zIndex
  icons:        icons

#save polyline
polyline.serviceObject = new_poly
new_poly.setMap(@serviceObject)

这就是改变了以及我如何填充驱动折线创建的json。

如果我通过在创建后立即设置断点来检查Chrome中的“new_poly”对象并使用setMap函数将其添加到地图中，则返回该对象（删除通用访问器和对象引用）。

new_poly
  icons: Array[1]
    0: Object
      icon: Object
        path: "M 0,-2 0,2"
        strokeColor: "red"
        strokeOpacity: 1
      repeat: "24px"
      length: 1
  latLngs: Nf
  map: xh
  strokeColor: "yellow"
  strokeOpacity: 0

所有这一切 我不知道发生了什么事。看起来，对于所有意图和目的，添加到地图的折线对象在结构上是相同的。 gmaps4rails中是否存在我在如何向地图添加内容时缺少的阶段？

更新1 8/21/2012 我已将所有内容转换为使用该分支。但是我遇到了同样的问题。我使用jsfiddle从google / objects / polyline.coffee中的mergedOptions对象获取输出，并显示从gmaps4rails中创建的折线。在jsfiddle，它工作正常，但是当在gmaps4rails中创建时，没有运气。以下是小提琴的链接：working dashed line

因此，为了确保地图中没有任何内容，我将以下内容添加到gmaps4rails回调中。

var icon_array = {"icons":[{"repeat":"24px","icon":{"path":"M 0,-2 0,2","strokeOpacity":1,"strokeColor":"red", "scale": 4}}],"path":[{"$a":35,"ab":-70},{"$a":40,"ab":-80},{"$a":50,"ab":-85}],"strokeColor":"yellow"};


var route1 =
[
    new google.maps.LatLng(35,-70),
    new google.maps.LatLng(40,-80),
    new google.maps.LatLng(50, -85)
];
console.log(icon_array);

icon_array.path = route1;

var path1 = new google.maps.Polyline(icon_array);
path1.setMap(Gmaps.map.map.serviceObject);

它创建一条纯黄色线而不是预期的虚线。传递到polyline.coffee中的新google.maps.Polyline mergedOptions行的对象是我在上面的JSON解析中使用的。由于在从JSON解析时没有我假设的类型信息，我不得不重置路径数组，但客观上它应该是正确的，因为你有createLatLng函数，它在折线阵列的polylines.coffee脚本中创建了一个google lat / lng对象

真的很奇怪。我开始查看地图上创建的选项，但似乎没有任何可能导致问题的选项。

Answer 1

我确定了gmaps4rails如何创建地图以及jsFiddle如何创建地图的区别，并得出结论，这是来自谷歌的地图api的api设置。

在./lib/gmaps4rails/view_helper.rb的第8行，有一行：

GOOGLE     = "//maps.google.com/maps/api/js?v=3.8"

如果您将此行更改为：

GOOGLE     = "//maps.google.com/maps/api/js?"

因此从API调用中删除基本版本，它允许地图在使用gmaps4rails时显示虚线。

我不确定为什么在map js定义中的显式版本调用会使虚线不起作用，但我现在能够利用自定义gem来显示虚线，我想在线上有更复杂的SVG符号。 / p>

感谢apneadiving的帮助。我没想到如果没有下载源代码并开始挖掘，我会想到这一点。我想这也适用于非客观化的分支。

我将在github项目上发表一篇关于调查结果的文章。再次感谢，gmaps4rails一直是一个巨大的帮助。

使用gmaps4rails显示虚线

1 个答案: