Javascript, Thay đổi màu đánh dấu bản đồ google

Question

Tôi có thể biết cách thay đổi màu đánh dấu Bản đồ Google qua Javascript .. Tôi mới ở đây và mọi trợ giúp sẽ được đánh giá cao, Cảm ơn bạn.

tôi đã sử dụng đoạn mã sau để tạo ra một dấu hiệu

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

Trong Google Maps API v3 bạn có thể thử thay đổi biểu tượng đánh dấu. Ví dụ để sử dụng biểu tượng màu xanh lá cây:

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

Hoặc như một phần của marker init:

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

màu sắc khác:

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

vv

Answer 2

Bạn có thể sử dụng strokeColor tài sản:

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

Xem this page cho khả năng khác.

Answer 3

Bạn có thể sử dụng mã này hoạt động tốt.

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

Tôi có 4 tàu để thiết lập trên một bản đồ duy nhất, vì vậy tôi sử dụng ví dụ phát triển của Google và sau đó xoắn nó

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

Trong chức năng dưới đây tôi đặt 3 các tùy chọn màu sắc khác:

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 trong CHO rống lên tôi đặt một màu cho mỗi tàu:

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 
} 

Kết quả cuối cùng:

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

Answer 5

tôi đề nghị sử dụng các Google Charts API bởi vì bạn có thể chỉ định các văn bản, màu chữ, điền màu và tô màu, tất cả đều sử dụng mã màu hex, ví dụ # FF0000 cho màu đỏ. Bạn có thể gọi nó như sau:

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

Sau đó, khi bạn tạo điểm đánh dấu của bạn, bạn chỉ cần thiết lập thuộc tính biểu tượng như vậy, nơi các biến mycolor là những giá trị hex (trừ dấu băm):

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

Bạn có thể sử dụng http://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=•|FF0000, một cách dễ dàng hơn để giải mã, dưới dạng một URL thay thế nếu bạn chỉ cần đặt văn bản và tô màu.

câu trả lời của khurram đề cập đến trang web của bên thứ ba chuyển hướng đến API Google Charts. Điều này có nghĩa là nếu người đó hạ gục máy chủ của họ, bạn sẽ bị hosed. Tôi thích có sự linh hoạt mà API Google cung cấp cũng như độ tin cậy khi truy cập trực tiếp vào Google. Chỉ cần đảm bảo bạn chỉ định giá trị cho mỗi màu hoặc nó sẽ không hoạt động.

Answer 6

bạn có thể sử dụng api biểu đồ google và tạo ra bất kỳ màu với mã rgb on the fly:

dụ: đánh dấu với màu #ddd:

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

bao gồm như đã nêu ở trên với

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 = $ (". Đánh dấu bản đồ"). Trẻ em ("img"). Attr ("src") var pinImage = new google.maps.MarkerImage (map_marker);

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