Javascript, Google harita işaretleyicisini değiştir renk

Question

Google Harita işaretleyici rengini Javascript ile değiştirmenin bir yolunu öğrenebilir miyim .. Bu konuda yeniyim ve herhangi bir yardım için çok teşekkür ederim, teşekkürler.

Sana işaretleyici simgesi değiştirmeyi deneyebilirsiniz v3 işaretçisi Google Maps API olarak

marker = new google.maps.Marker({ 
    position: new google.maps.LatLng(locations[i][1], 
    locations[i][2]), 
    animation: google.maps.Animation.DROP, 
    map: map 
}); 

Answer 1

oluşturmak için aşağıdaki kodu kullanılır. Yeşil simge kullanımı için Örnek:

marker.setIcon('http://maps.google.com/mapfiles/ms/icons/green-dot.png') 

Veya işaretleyici init bir parçası olarak:

marker = new google.maps.Marker({ 
    icon: 'http://...' 
}); 

Diğer renkler:

• http://maps.google.com/mapfiles/ms/icons/blue-dot.png
• http://maps.google.com/mapfiles/ms/icons/red-dot.png

var marker = new google.maps.Marker({ 
    id: "some-id", 
    icon: { 
     path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW, 
     strokeColor: "red", 
     scale: 3 
    }, 
    map: map, 
    title: "some-title", 
    position: myLatlng 
}); 

diğer olasılıklar için this page bakınız:Vb

Answer 2

Sen strokeColor özelliğini kullanabilirsiniz.

Answer 3

Bu kodu kullanabilirsiniz, iyi çalışıyor.

var pinImage = new google.maps.MarkerImage("http://www.googlemapsmarkers.com/v1/009900/"); 

var marker = new google.maps.Marker({ 
      position: yourlatlong, 
      icon: pinImage, 
      map: map 
     }); 

see Example here

Answer 4

Ben tek harita üzerinde ayarlamak için 4 gemi var, bu yüzden Google Geliştirici örnek verelim ve ben set 3 feryat sonra fonksiyonunda

https://developers.google.com/maps/documentation/javascript/examples/icon-complex

büktü daha fazla renk seçeneği:

function setMarkers(map, locations) { 
... 
var image = { 
    url: 'img/bullet_amarelo.png', 
    // This marker is 20 pixels wide by 32 pixels tall. 
    size: new google.maps.Size(40, 40), 
    // The origin for this image is 0,0. 
    origin: new google.maps.Point(0,0), 
    // The anchor for this image is the base of the flagpole at 0,32. 
    anchor: new google.maps.Point(0, 40) 
    }; 
    var image1 = { 
      url: 'img/bullet_azul.png', 
      // This marker is 20 pixels wide by 32 pixels tall. 
      size: new google.maps.Size(40, 40), 
      // The origin for this image is 0,0. 
      origin: new google.maps.Point(0,0), 
      // The anchor for this image is the base of the flagpole at 0,32. 
      anchor: new google.maps.Point(0, 40) 
      }; 
    var image2 = { 
      url: 'img/bullet_vermelho.png', 
      // This marker is 20 pixels wide by 32 pixels tall. 
      size: new google.maps.Size(40, 40), 
      // The origin for this image is 0,0. 
      origin: new google.maps.Point(0,0), 
      // The anchor for this image is the base of the flagpole at 0,32. 
      anchor: new google.maps.Point(0, 40) 
     }; 
    var image3 = { 
      url: 'img/bullet_verde.png', 
      // This marker is 20 pixels wide by 32 pixels tall. 
      size: new google.maps.Size(40, 40), 
      // The origin for this image is 0,0. 
      origin: new google.maps.Point(0,0), 
      // The anchor for this image is the base of the flagpole at 0,32. 
      anchor: new google.maps.Point(0, 40) 
     }; 
... 
} 

Bir

for (var i = 0; i < locations.length; i++) { 
... 
    if (i==0) var imageV=image; 
    if (i==1) var imageV=image1; 
    if (i==2) var imageV=image2; 
    if (i==3) var imageV=image3; 
... 
# remember to change icon: image to icon: imageV 
} 

nihai sonuç:

http://www.mercosul-line.com.br/site/teste.html

Answer 5

metin, metin rengini belirtebilirsiniz çünkü Google Charts API kullanmanızı öneririz, dolgu rengi için de d Her gemi için bir renk ayarlamak feryat ve altıgen renk kodlarını kullanarak Kırmızı için # FF0000.

function getIcon(text, fillColor, textColor, outlineColor) { 
    if (!text) text = '•'; //generic map dot 
    var iconUrl = "http://chart.googleapis.com/chart?cht=d&chdp=mapsapi&chl=pin%27i\\%27[" + text + "%27-2%27f\\hv%27a\\]h\\]o\\" + fillColor + "%27fC\\" + textColor + "%27tC\\" + outlineColor + "%27eC\\Lauto%27f\\&ext=.png"; 
    return iconUrl; 
} 

Daha sonra, işaretleyici oluştururken sadece myColor değişkenleri onaltılık değerler (eksi karma işareti) nerede, gibi ikon özelliğini ayarlayın: aşağıdaki gibi diyebilirsiniz

var marker = new google.maps.Marker({ 
    position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
    animation: google.maps.Animation.DROP, 
    map: map, 
    icon: getIcon(null, myColor, myColor2, myColor3) 
}); 

Sadece metin ve dolgu rengini ayarlamanız gerekiyorsa alternatif URL olarak http://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=•|FF0000'u deşifre etmek biraz daha kolay olabilir.

khurram'ın yanıtı Google Grafikler API'sine yönlendiren üçüncü taraf bir siteyi ifade eder. Bu, eğer bu kişi, beklediğiniz sunucuyu indirirse demektir. Google API’nın sunduğu esnekliği ve doğrudan Google’a gitmenin güvenilirliğini tercih ediyorum. Her bir renk için bir değer belirttiğinizden emin olun, aksi takdirde işe yaramaz.

Answer 6

google grafik API kullanmak ve anında RGB kodu ile herhangi bir renk oluşturabilir:

örnek:

var marker = new google.maps.Marker({ 
    position: marker, 
    title: 'Hello World', 
    icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|ddd' 
}); 

ile yukarıda belirtildiği gibi

http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|ddd 

şunlardır: #ddd renkli markör

Answer 7

var map_marker = $ (". Map-marker") Çocuklar ("img") attr ("src") var pinImage = new google.maps.MarkerImage (map_marker);

 var marker = new google.maps.Marker({ 
     position: uluru, 
     map: map, 
     icon: pinImage 
    }); 
    }