Question

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

我做错了什么？如何将标记设置为不同的颜色而不是全部为橙色。

我在下面的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

Answer 1

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

创建一个函数（使用URL填充对象）。

当您在没有参数的情况下调用函数时，返回带有键的数组（您可以将其用作请求的types-option）。

当使用参数（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/

Google Maps API v3与Coffeescript不同的颜色标记

1 个答案: