谷歌地图API V3不同的颜色标记W/CoffeeScript的

我试图建立基于从谷歌地图API 但由于某些原因类型的只显示从请求对象内部的数组橙色不同的颜色标记但但是console.log显示了所有不同的类型。谷歌地图API V3不同的颜色标记W/CoffeeScript的

我在做什么错？我怎样才能让标记成为不同的颜色，而不是全部是橙色的。

我写在下面的CoffeeScript：

jQuery ($) -> 


map = null 
infowindow = null 
request = null 
icons = null 
specific_icon = null 
marker = null 
markers = null 
value = null 
collection = null 

init =() -> 
    # Setup map options 
    mapOptions = 
     center: new google.maps.LatLng(47.54809, -122.1230) 
     zoom: 11 
     streetViewControl: false 
     panControl: false 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
     zoomControlOptions: 
      style: google.maps.ZoomControlStyle.SMALL 
     mapTypeControlOptions: 
      mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style'] 

    # Create the map with above options in div 
    map = new google.maps.Map(document.getElementById("map"),mapOptions) 

    # Drop marker in the same location 
    marker = new google.maps.Marker 
     map: map 
     animation: google.maps.Animation.DROP 
     position: mapOptions.center 
     icon: 'http://www.google.com/intl/en_us/mapfiles/ms/micons/red-dot.png' 

    # Create a request field to hold POIs 
    request = 
     location: new google.maps.LatLng(47.54809, -122.1230) 
     radius: 4000 
     types: ['store','food','park','school'] 

    # Create the infowindow(popup over marker) 
    infowindow = new google.maps.InfoWindow() 

    # Setup places nearby search (it setups points near the center marker) 
    service = new google.maps.places.PlacesService(map) 
    service.nearbySearch(request, callback) 


# Create the callback function to loop thru the places (object) 
callback = (results, status) -> 
     if status is google.maps.places.PlacesServiceStatus.OK 
      for index, attrs of results 
       createMarker results[index] 


# Create the actual markers for the looped places 
createMarker = (place) -> 

    collection = request.types 

    icons = 
     store: 'http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png' 
     food: 'http://www.google.com/intl/en_us/mapfiles/ms/micons/yellow-dot.png' 
     park: 'http://www.google.com/intl/en_us/mapfiles/ms/micons/green-dot.png' 
     school:'http://www.google.com/intl/en_us/mapfiles/ms/micons/orange-dot.png' 

    for index, value of collection 
     marker = new google.maps.Marker 
      map: map 
      position: place.geometry.location 
      icon: icons[value] 
     console.log value 

     # Create a click listener that shows a info window with places name 
     google.maps.event.addListener marker, 'click', -> 
      infowindow.setContent(place.name) 
      infowindow.open(map,@) 



init()

任何和所有帮助表示赞赏 -David

来源

2013-01-10 David Chase

什么不起作用？ – Nix

如果您更改图标的顺序或删除orange-dot.png，它们仍然呈橙色吗？ –

我对coffeescript不熟悉，但似乎你为同一位置上的每个地方创建了4个标记。 4个标记的最后一个标记（因此是最多也是唯一一个）将始终是橙色标记（使标记可拖动，也许你会发现其他标记在后面）。您必须从'place.types'中获取类型，并为每个位置创建一个标记，而不是迭代request.types。 –

由于这个问题是由意见解决，一个建议，如何把握图标单对象：

创建一个函数（其中有对象填充了URL）。

当您在不带参数的情况下调用该函数时，返回一个带有键的数组（可以将其用作请求的类型选项）。

当函数已被调用的自变量（place.types）找到对象内的所希望的图标，并返回该URL

实施例功能（其可能作为标记的图标选项使用）：
（请原谅我，当它没有良好的编码风格，这是我第一次的CoffeeScript）

gettypes = (types=[]) -> 
    icons = 
     store: 'http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png' 
     food: 'http://www.google.com/intl/en_us/mapfiles/ms/micons/yellow-dot.png' 
     park: 'http://www.google.com/intl/en_us/mapfiles/ms/micons/green-dot.png' 
     school:'http://www.google.com/intl/en_us/mapfiles/ms/micons/orange-dot.png' 

    if !types.length 
     for key of icons 
     key 
    else 
     for icon in types 
     if icon of icons 
      return icons[icon] 
     'http://www.google.com/intl/en_us/mapfiles/ms/micons/info_circle.png'

演示：http://jsfiddle.net/doktormolle/3TN7f/

来源

2013-01-10 07:36:24

非常感谢你我这样做和咖啡！ –

谷歌地图API V3不同的颜色标记W/CoffeeScript的

回答

相关问题