1

我正在尝试根据来自 google maps api 的类型设置不同的颜色标记，但由于某种原因，它仅显示请求对象内数组中的橙色，但 console.log 显示了所有不同的类型。

我究竟做错了什么？我怎样才能让标记变成不同的颜色，而不是全是橙色。

我在下面的咖啡脚本中写了它：

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()

任何和所有的帮助表示赞赏 - 大卫

4

1 回答 1

2

由于问题已通过评论解决，因此建议如何将图标保存在单个对象中：

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

当你调用没有参数的函数时，返回一个带有键的数组（你可以将它用作请求的类型选项）。

当使用参数（place.types）调用函数时，在对象内找到所需的图标并返回 url（您可以将其用作标记的图标选项）

示例功能：（
如果编码风格不好，请原谅我，这是我的第一个咖啡脚本）

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-10T07:36:24.733 回答