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

ありとあらゆる助けをいただければ幸いです-David

4

1 に答える 1

2

問題はコメントによって解決されるため、アイコンを単一のオブジェクトに保持する方法の提案:

関数を作成します（オブジェクトに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-10T07:36:24.733 に答える