谷歌地圖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的

回答

相關問題