javascript - 使用 gmaps4rails 显示虚线

Question

环境: MacOSX、RoR 3.2.6、gmaps4rails 1.5.5、Google map API V3

愿望:使用能够支持 Google map 中符号机制的 gmaps4rails 在 map 上显示折线会很好。

引用文档:

Google Maps API Polylines Symbols Documentation

Google Maps API Symbol Ref

Live example of symbols on polylines

Gmaps4Rails Documentation on Polylines

问题的当前状态 我目前可以使用普通属性(行程颜色、行程重量、行程不透明度)来利用 gmaps4rails 绘制折线。当我尝试添加元数据以在线创建符号时，问题就出现了。

Google map 中的工作代码

根据折线上符号的文档，您可以创建一个图标数组，其中包含 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 检查窗口中检查对象并在 map 最终确定之前设置断点时，您会得到一个如下格式的对象(删除了通用访问器和对象引用):

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 进行复制

我有一个通用 map Controller ，可以加载多个多边形、符号和折线。如前所述，获得通用折线是没有问题的。这是 Controller 中的 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

综上所述 我不知道发生了什么事。看起来，无论出于何种意图和目的，添加到 map 中的折线对象在结构上都是相同的。 gmaps4rails 中是否存在我在如何向 map 添加内容方面遗漏的阶段？

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

因此，为了确保 map 中没有任何内容，我将以下内容添加到 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 对象.

确实很奇怪。我开始查看创建 map 时的选项，但似乎不会有任何可能导致问题的内容。

Answer 1

我确定了 gmaps4rails 创建 map 的方式和 jsFiddle 创建 map 的方式有什么区别，并得出结论，这是来自 google 的 map 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 调用中删除了基本版本，它允许 map 在使用 gmaps4rails 时显示虚线。

我不确定为什么 map js 定义中的显式版本调用会使虚线不起作用，但是我现在可以利用自定义 gem 来显示虚线，并且我想象线上有更复杂的 SVG 符号。

感谢您的帮助。我不认为我会在没有下载源代码并开始挖掘的情况下弄清楚这一点。我想这也适用于非对象化分支。

我将在 github 项目上发表一篇文章，并附上调查结果。再次感谢，gmaps4rails 提供了巨大的帮助。