Javascript, измените цвет маркера карты google

Question

Могу ли я узнать способ изменения цвета маркера карты Google с помощью Javascript. Я новичок в этом, и любая помощь будет очень признательна, спасибо.

Я использовал следующий код для создания маркера

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

В Google Maps API v3 вы можете попытаться изменить иконку маркера. Например, для зеленого использования иконки:

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

Или как часть маркера INIT:

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

Другие цвета:

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

Etc.

Answer 2

Вы можете использовать strokeColor свойство:

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 
}); 

См this page другие возможности.

Answer 3

Вы можете использовать этот код, он отлично работает.

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

У меня есть 4 корабля, чтобы установить на одной карте, поэтому я использую пример Google Developers, а затем повернул его

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

В функции ниже я установил 3 больше вариантов цвета:

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) 
     }; 
... 
} 

An d в ФОР реветь я поставил один цвет для каждого корабля:

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 
} 

Конечный результат:

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

Answer 5

Я предлагаю использовать Google Charts API потому что вы можете указать текст, цвет текста, цвет заливки и контурный цвет, все с использованием шестнадцатеричных цветовых кодов, например # 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; 
} 

Затем, когда вы создаете свой маркер, просто установите свойство значок как таковой, где переменные myColor являются шестнадцатиричное значение (минус диез):

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) 
}); 

Вы можете использовать http://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=•|FF0000, что немного проще расшифровать, как альтернативный URL, если вам нужно только установить текст и заполнить цвет.

Ответ khurram относится к стороннему сайту, который перенаправляет API Google Chart. Это означает, что если этот человек уберет свой сервер, вы будете взволнованы. Я предпочитаю иметь гибкость, предлагаемую Google API, а также надежность перехода непосредственно в Google. Просто убедитесь, что вы указали значение для каждого из цветов или оно не будет работать.

Answer 6

вы можете использовать диаграмму API Google и генерировать любой цвет с RGB код на лету:

пример: маркер с #ddd цвет:

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

включают в себя, как указано выше, с

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' 
}); 

Answer 7

var map_marker = $ (". Map-marker"). Children ("img"). Attr ("src") var pinImage = new google.maps.MarkerImage (map_marker);

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