應用動態CSS樣式到谷歌地圖的標記

我知道，我們可以動態地應用標籤或圖標圖像或CSS類在angularJs谷歌的標誌，但我無法挖掘出我們如何申請動態的CSS樣式來標記。我必須在谷歌地圖上動態生成標記並動態着色。我們能做到嗎？應用動態CSS樣式到谷歌地圖的標記

我曾嘗試以下，但似乎並不奏效

var putMarker = function(lat,long,color) {    
     var marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(lat,long), 
     map: map, 
     labelStyle: {backgroundColor:"#ff00ff", height:"5px", width:"5px", borderRadius:"50px"}, 
     icon: 'img/mapView.png', 
     label: (markers.length + 1) + '', 
     animation: google.maps.Animation.DROP, 
     isDraggable: false 
     }); 

     markers.push(marker); 

     //extend the bounds to include each marker's position 
     bounds.extend(marker.position); 

     //now fit the map to the newly inclusive bounds 
     map.fitBounds(bounds); 
    }

來源

2016-04-18 Mr. Noddy

爲什麼你不試圖給你的圖標風格？您也可以使用MarkerImage類來調整大小等。 – tayfun

我該如何給我的圖標賦予風格？任何解決方案..什麼是markerImage類？ –

MarkerImage depricated，您可以使用圖標類。

var customSizeImage = { 
    url: place.icon, 
    size: new google.maps.Size(71, 71), 
    origin: new google.maps.Point(0, 0), 
    anchor: new google.maps.Point(17, 34), 
    scaledSize: new google.maps.Size(25, 25) 
}; 

var marker = new google.maps.Marker({ 
    position: {lat: lat, lng: lng}, 
    map: map, 
    icon: customSizeImage 
});

就是這樣。

來源

2016-04-19 06:18:28 tayfun

如果要在標記上顯示單個文本字符，可以使用標記標籤。如果您需要更大的自定義，您可以定義一個圖標來顯示，而不是默認的標記圖像。定義一個圖標需要設置一些屬性來確定標記的視覺行爲。

A marker label是出現在標記內的單個文本字符。您可以將標記標籤指定爲包含字符串和其他標籤屬性的字符串或MarkerLabel對象。在這兩種情況下，只有指定字符串的第一個字符顯示在標記上。

創建標記時，可以在MarkerOptions對象中指定標籤屬性。或者，您可以調用標記對象上的setLabel（）以在現有標記上設置標籤。

下面是一些示例代碼：

// This example adds a marker to indicate the position of Bondi Beach in Sydney, 
// Australia. 
function initMap() { 
var map = new google.maps.Map(document.getElementById('map'), { 
zoom: 4, 
center: {lat: -33, lng: 151} 
}); 

var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'; 
var beachMarker = new google.maps.Marker({ 
position: {lat: -33.890, lng: 151.274}, 
map: map, 
icon: image 
}); 
}

欲瞭解更多信息，請檢查該page。

來源

2016-04-19 09:40:15 KENdi

應用動態CSS樣式到谷歌地圖的標記

回答

相關問題