1

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

愿望：使用 gmaps4rails 在地图上显示折线会很好，它可以支持谷歌地图中的符号机制。

参考文档：

Google Maps API 折线符号文档

谷歌地图 API 符号参考

折线上符号的实时示例

折线上的 Gmaps4Rails 文档

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

谷歌地图中的工作代码

从折线上符号的文档中，您可以创建一个图标数组，其中包含 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 中创建并应用于 onLoad() 函数的 javascript。

我尝试使用 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 中是否存在我在如何向地图中添加内容时遗漏的阶段？

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

因此，为了确保地图中没有任何内容，我将以下内容添加到 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 合并选项行的对象就是我在上面的 JSON 解析中使用的对象。我不得不重置路径数组，因为我在从 JSON 解析时假设没有类型信息，但客观上它应该是正确的，因为你有 createLatLng 函数，该函数在 polylines.coffee 脚本中从折线数组创建一个谷歌纬度/经度对象.

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

4

1 回答 1

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 时显示虚线。

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

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

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

于 2012-08-21T13:13:23.360 回答